CRA + 反转@inject模块解析失败：意外字符'@'

Question

这是我得到的错误

。/src/核心/供应商/todoApi/TodoApiProvider。ts 14模块解析失败:意外字符'@' (10:14)文件被这些加载器处理:

• 。/node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/装载机/index.js
• 。/node_modules/babel-loader/lib/index.js您可能需要一个额外的加载程序来处理这些加载程序的结果。|类TodoApiProvider {

构造函数(@ inject (TYPES.HttpClient)| httpClient) {|。httpClient = void 0;

TodoApiProvider.ts

class DefaultTodoApiProvider implements TodoApiProvider {
private httpClient: HttpClient;
// @inject(TYPES.HttpClient) return error
constructor(@inject(TYPES.HttpClient) httpClient: HttpClient) {
this.httpClient = Dependency.get(TYPES.HttpClient);
}
async getTodoById(id: string) {
const data = await this.httpClient.get(
`https://jsonplaceholder.typicode.com/todos/${id}`
);
return data;
}
}
decorate(injectable(), TodoApiProvider);
export default DefaultTodoApiProvider;

如果我把@inject(TYPES.HttpClient)放在private httpClient: HttpClient;上面，它会得到另一个错误Cannot access 'TYPES' before initialization。

.babelrc

{
"presets": [
...,
"@babel/preset-typescript"
],
"plugins": [
...,
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
],
"env": {
"test": {
"plugins": [
"transform-require-context",
"babel-plugin-transform-typescript-metadata",
"babel-plugin-parameter-decorator"
]
}
}
}

tsconfig.js

{
"compilerOptions": {
...,
"emitDecoratorMetadata": false,
},
}

Answer 1

阶段1和阶段2的装饰器提案都不支持参数装饰器。实现提案的@babel/plugin-proposal-decorators不知道如何处理参数装饰器。结果，产生错误消息Unexpected character '@'。只有Typescript才知道参数装饰器。

我使用Next.js不是CRA，但我相信这是同样的问题。对于Next.js，我通过安装ts-loader并配置Next.js的webpack配置来在babel-loader之前使用ts-loader来解决这个问题。

下面的代码片段是特定于Next.js的。我参考它来阐明我的观点。

config.module.rules.forEach((rule) => {
if (rule.test instanceof RegExp && rule.test.test(".ts")) {
if (Array.isArray(rule.use)) {
rule.use.push("ts-loader");
} else {
rule.use = [rule.use, "ts-loader"];
}
}
});

关于在初始化之前访问TYPES，我没有调查为什么会发生这种情况，因为它在修复第一个问题时也通过使用ts-loader来解决。