Babel 7 + Inversify 4 + WebPack 4 - неожиданный символ '@' в @inject

У меня есть проект Vue SPA с машинописным текстом, в котором я использую Inversify.

Я использовал awesome-typescript-loader для компиляции исходного кода машинописного текста; теперь я хочу переключиться на Babel, но когда я компилирую свое приложение, webpack вызывает эту ошибку:

Ошибка синтаксического анализа модуля: неожиданный символ '@' (38:25). Для обработки этого типа файлов может потребоваться соответствующий загрузчик.
| _inherits (ReportService, _BaseService);
| > функция ReportService (@inject (TYPES.Urls)
| 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 и настроим его на работу.


webpack typescript babeljs babel-loader inversifyjs
person Max    schedule 28.09.2018    source источник
comment
Работают ли декораторы классов, методов и свойств? Если это так, возможно, babel еще не поддерживает транспилирование декораторов для аргументов функции, но я не уверен   -  person kingdaro    schedule 28.09.2018
comment
Да декораторы работают. Спасибо   -  person Max    schedule 28.09.2018
comment
У меня та же проблема, которую я решил, добавив дополнительный плагин babel-plugin-transform-function-parameter-decorators, однако в моем случае это решило проблему только частично, потому что теперь, даже если транспиляция прошла успешно, я получаю Missing required inject или multiInject аннотация в: аргумент 0 при использовании внедрения конструктора   -  person antanas_sepikas    schedule 03.01.2019

Ответы (1)


arrow_upward
4
arrow_downward

Это действительно раздражающая проблема реализации @babel/preset-typescript:
она удаляет типы и не генерирует относительные метаданные в выходном коде.

Единственное, что помогло, - это babel-plugin-transform- машинописные метаданные

{
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
  ],
  "presets": [
    "@babel/preset-typescript"
  ]
}
person am0wa    schedule 02.12.2020
comment
Я потратил целый день, пытаясь заставить работать инверси. Ваш ответ спас меня. - person Abdou Ouahib; 22.01.2021
comment
@AbdouOuahib Добро пожаловать. Да уж, это был совсем безвыходный случай :) - person am0wa; 27.01.2021