[英]Webpack 4, babel 7, react, typescript: Unexpected token, expected ","
[英]Babel 7 + Inversify 4 + WebPack 4 - Unexpected character '@' on @inject
我有一个使用Inversify的打字稿 Vue SPA 项目。
我使用了awesome-typescript-loader来编译我的打字稿源代码; 现在我想切换到Babel但是当我编译我的应用程序webpack 时会引发这个错误:
模块解析失败:意外字符“@”(38:25) 您可能需要一个
适当的加载程序来处理此文件类型。
| _inherits(ReportService, _BaseService);
| > 函数 ReportService(@inject(TYPES.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"
]
}
配置文件
{
"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-loader 的awesome- typescript-loader
{
test: /\.ts$/,
exclude: /node_modules/,
use: ['babel-loader', 'awesome-typescript-loader']
}
并删除不必要的 babel 插件并预设它工作。
这是@babel/preset-typescript
实现的一个非常烦人的问题:
它剥离类型并且不在输出代码中发出相关元数据。
唯一有帮助的是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"
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.