Babel 7 + Inversify 4 + WebPack 4 - @inject 上的意外字符'@'

Posted 2023-02-22

【中文标题】Babel 7 + Inversify 4 + WebPack 4 - @inject 上的意外字符\'@\'

【英文标题】：Babel 7 + Inversify 4 + WebPack 4 - Unexpected character '@' on @injectBabel 7 + Inversify 4 + WebPack 4 - @inject 上的意外字符'@'

【发布时间】：2019-03-04 14:26:26

【问题描述】：

我有一个打字稿 Vue SPA 项目，我使用 Inversify。

我使用 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"
    ]

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 插件并对其进行预设。

【问题讨论】：

类、方法和属性装饰器有效吗？如果是这样，也许 babel 还不支持在函数参数上转译装饰器，但我不确定

是的，装饰器可以工作。谢谢

我遇到了同样的问题，我通过添加额外的插件“babel-plugin-transform-function-parameter-decorators”解决了这个问题，但是在我的情况下，这只是部分解决了这个问题，因为现在即使转译成功，我得到“在使用构造函数注入时缺少所需的注入或多注入注释：参数 0”

【参考方案1】：

这是@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"
  ]

【讨论】：

我花了一整天的时间试图让 inversify 工作。你的回答救了我。

@AbdouOuahib 不客气。是的，这是非常绝望的情况:)

谢谢！我整天都在玩 babel 设置，这个简单的更改让它完美运行！