通天塔 7 + 反转 4 + WebPack 4 - @inject上意外的角色'@'

Question

我有一个打字稿Vue SPA项目，我在其中使用Inversify。

我使用很棒的打字稿加载器来编译我的打字稿源代码;现在我想切换到Babel，但是当我编译我的应用程序webpack时会引发此错误：

模块解析失败：意外字符"@"(38：25( 您可能需要适当的
加载程序来处理此文件类型。| _inherits(ReportService
， _BaseService(;
|>函数 ReportService(@inject(TYPES.网址(
| 网址( {
| var _this;
@ ./app/Ioc/container.ts 6：0-54 14：39-52
@ ./app/startup.ts

.babelrc

{
"presets": [
"@babel/env",
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}

tsconfig.json

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"test/*": [ "test/*" ],
"@/*": [ "app/*" ]
},
"lib": [ "es6", "dom" ], // es6 minimum required for Promise
"target": "es6", // Required for vuetify
"strict": true,
"module": "esNext",
"moduleResolution": "node",
"experimentalDecorators": true, // Required for @Component for Vue
"strictPropertyInitialization": false,
"noImplicitAny": false,
"allowUnusedLabels": false,
"noEmit": true,
"noUnusedLocals": true,
"noImplicitReturns": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules"
]
}

webpack.config.js

const config = {
entry: {
app: './app/startup.ts'
},
output: {
path: path.resolve(__dirname, "wwwroot", "dist"),
filename: '[name].js'
},
module: {
rules: [
{
test: /.(html)$/,
use: {
loader: 'html-loader'
}
},
{
test: /.ts$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
enforce: "pre",
test: /.js$/,
loader: "source-map-loader",
exclude: [
path.join(process.cwd(), 'node_modules')
]
},
]
},
resolve: {
alias: {
'vue': 'vue/dist/vue.esm.js',
'@': path.join(__dirname, 'app')
},
extensions: ['.vue', '.ts', '.js']
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
name: "vendors",
chunks: "all",
enforce: true,
priority: -10
}
}
}
}
}

如果我使用链接到babel 加载器的真棒打字稿加载器

{
test: /.ts$/,
exclude: /node_modules/,
use: ['babel-loader', 'awesome-typescript-loader']
}

并删除不必要的 babel 插件并预设它工作。

Answer 1

这是@babel/preset-typescript实现的一个非常烦人的问题：
it 剥离类型并且不会在输出代码中发出相对元数据。

唯一有帮助的是 babel-plugin-transform-typescript-metadata

{
"plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
],
"presets": [
"@babel/preset-typescript"
]
}