[英]Can't get typescript to play nicely with babel in webpack
I'm trying to convert a project to typescript, and one of the requirements is to use decorators on both classes and function parmeters:我正在尝试将项目转换为打字稿,其中一项要求是在类和函数参数上使用装饰器:
function(@inject(TYPES.thing) thingy){...}
I feel i'm really close, just missing this last puzzle piece :)我觉得我真的很接近,只是错过了最后一块拼图:)
Here is my webpack config:这是我的 webpack 配置:
return {
entry: path.resolve(__dirname, './src/js/Index.ts'),
output: {
filename: 'formr.bundle.js',
path: path.resolve(__dirname, `dist/${argv.mode === 'production' ? 'prod' : 'dev'}/js/`),
library: 'Formr',
libraryTarget: "umd"
},
devtool: devtool,
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".js", ".ts", ".tsx"]
},
mode: argv.mode,
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader',
exclude: '/node_modules/',
query: {
presets: [
"@babel/typescript",
['@babel/preset-env', {
targets: {
browsers: "last 2 versions"
}
}]],
plugins: [
'lodash',
["@babel/plugin-proposal-decorators", { "legacy": true }],
"babel-plugin-parameter-decorator",
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-private-methods',
'@babel/plugin-proposal-optional-chaining'
]
}
},
{
test: /\.js$/,
use: ["source-map-loader"],
enforce: "pre"
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader'
}
],
},
plugins: [
new SpriteLoaderPlugin(),
new LodashModuleReplacementPlugin()
]
}
and my tsconfig:和我的 tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "Node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"target": "es5",
"lib": ["es6", "dom", "es2017.object"],
"types": ["reflect-metadata"],
"sourceMap": true,
"allowJs": true,
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*"
]
}
The error I'm getting during build is:我在构建过程中遇到的错误是:
ERROR in ./src/js/plugins/TranslationPlugin.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /src/js/plugins/TranslationPlugin.ts: Cannot read property 'referencePaths' of undefined
at _loop (/node_modules/babel-plugin-parameter-decorator/lib/index.js:117:36)
....
The error doesn't occur if I remove the babel-plugin-parameter-decorator
plugin, but then of course I get errors about not supporting parameter decorators.如果我删除
babel-plugin-parameter-decorator
插件,则不会发生该错误,但是当然我会收到关于不支持参数装饰器的错误。
According to this SO Answer , using babel-plugin-transform-typescript-metadata fixes the issue.根据这个 SO Answer ,使用babel-plugin-transform-typescript-metadata解决了这个问题。 So your babel plugins configuration would become:
所以你的 babel 插件配置将变成:
...
plugins: [
'lodash',
"babel-plugin-transform-typescript-metadata"
["@babel/plugin-proposal-decorators", { legacy: true }],
"babel-plugin-parameter-decorator",
["@babel/plugin-proposal-class-properties", { loose: true }],
'babel/plugin-proposal-private-methods',
'babel/plugin-proposal-optional-chaining'
]
...
Let me know if this works, or if you've fixed already as I'm interested too!让我知道这是否有效,或者您是否已经修复,因为我也很感兴趣! (I can't make babel+typescript work with TypeORM)
(我不能让 babel+typescript 与 TypeORM 一起工作)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.