typescript - 无法让 typescript 在 webpack 中与 babel 很好地配合使用
问题描述
我正在尝试将项目转换为打字稿,其中一个要求是在类和函数参数上使用装饰器:
function(@inject(TYPES.thing) thingy){...}
我觉得我真的很接近,只是错过了最后一块拼图:)
这是我的 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()
]
}
和我的 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/**/*"
]
}
我在构建过程中遇到的错误是:
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)
....
如果我删除插件,则不会发生该错误babel-plugin-parameter-decorator
,但是当然我会收到有关不支持参数装饰器的错误。
解决方案
根据这个 SO Answer,使用babel-plugin-transform-typescript-metadata解决了这个问题。所以你的 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'
]
...
让我知道这是否有效,或者您是否已经修复了,因为我也有兴趣!(我不能让 babel+typescript 与 TypeORM 一起工作)
推荐阅读
- python - 更新每个 beautifulsoup 中的最后 4 个
- go - 如何在 tcp 客户端中停止 io.Copy(file, conn)?
- ios - 当 429/503/500 时,APNS 是否返回重试标头
- python - 如何在python中只打印最后一行
- r - 在 PlotSvalbard 上向泛北极地图添加坐标
- blazor - Blazor 中的 TagBuilder 等价物是什么?
- ios - 在 Firebase 中删除/删除数组索引
- azure - 无法使用 terraform 在 blob 容器内创建文件夹
- javascript - 有没有办法在单个文本图层中获取所有颜色?
- mysql - MySQL逆向工程师没有显示关系