无法让 typescript 在 webpack 中与 babel 很好地配合使用答案

【问题标题】：Can't get typescript to play nicely with babel in webpack无法让 typescript 在 webpack 中与 babel 很好地配合使用
【发布时间】：2020-06-04 07:07:25
【问题描述】：

我正在尝试将项目转换为打字稿，其中一个要求是在两个类和函数参数上使用装饰器：

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 插件，该错误不会发生，但是我当然会收到有关不支持参数装饰器的错误。

【问题讨论】：

也许你需要 npm install 在 "/node_modules/babel-plugin-parameter-decorator" 里面？像这样使用它时可能缺少依赖项。

标签： typescript webpack babeljs

【解决方案1】：

根据this 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 一起工作）

【讨论】：