我有一个使用TypeScript编写的Vue SPA项目,其中使用了Inversify。
我使用awesome-typescript-loader来编译我的TypeScript源代码;现在我想切换到Babel,但是当我编译我的应用程序时,webpack会出现以下错误:
模块解析失败:意外字符“@”(38:25) 你可能需要适当的加载器来处理这种文件类型。| _inherits(ReportService, _BaseService); | > function ReportService(@inject(TYPES.Urls)
| urls) {
| 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
}
}
}
}
}
如果我使用awesome-typescript-loader链接到babel-loader
{
test: /\.ts$/,
exclude: /node_modules/,
use: ['babel-loader', 'awesome-typescript-loader']
}
去除不必要的 Babel 插件和预设,它就能正常工作。