Babel 7 + Inversify 4 + WebPack 4 - Karakter tak terduga '@' di @inject

Saya memiliki proyek Vue SPA ketikan di mana saya menggunakan Inversify.

Saya menggunakan awesome-typescript-loader untuk mengkompilasi kode sumber TypeScript saya; sekarang saya ingin beralih ke Babel tetapi ketika saya mengkompilasi aplikasi saya webpack munculkan kesalahan ini:

Penguraian modul gagal: Karakter tak terduga '@' (38:25) Anda mungkin memerlukan
pemuat yang sesuai untuk menangani jenis file ini.
| _inherits(Layanan Laporan, _BaseService);
| > fungsi ReportService(@inject(TYPES.Urls)
| urls) {
| var _ini;
@ ./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
                }
            }
        }
    }
}

Jika saya menggunakan awesome-typescript-loader yang dirantai ke babel-loader

{
    test: /\.ts$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'awesome-typescript-loader']
}

dan hapus plugin babel yang tidak perlu dan atur agar berfungsi.


webpack typescript babeljs babel-loader inversifyjs
person Max    schedule 28.09.2018    source sumber
comment
Apakah dekorator kelas, metode, dan properti berfungsi? Jika demikian, mungkin babel belum mendukung transpilasi dekorator pada argumen fungsi, tapi saya tidak yakin   -  person kingdaro    schedule 28.09.2018
comment
Ya, dekorator bekerja. Terima kasih   -  person Max    schedule 28.09.2018
comment
Saya mengalami masalah yang sama, yang saya selesaikan dengan menambahkan plugin tambahan babel-plugin-transform-function-parameter-decorators, namun dalam kasus saya ini menyelesaikan masalah hanya sebagian karena sekarang meskipun transpilasi berhasil, saya mendapatkan Missing diperlukan inject atau multiInject anotasi dalam: argumen 0 saat menggunakan injeksi konstruktor   -  person antanas_sepikas    schedule 03.01.2019

Jawaban (1)


arrow_upward
4
arrow_downward

Itu adalah masalah implementasi @babel/preset-typescript yang sangat mengganggu:
ia menghapus tipe dan tidak memancarkan Metadata relatif dalam kode keluaran.

Satu-satunya hal yang membantu adalah babel-plugin-transform- skrip-metadata

{
  "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
Saya menghabiskan sepanjang hari mencoba membuat inversify berfungsi. Jawaban Anda menyelamatkan saya. - person Abdou Ouahib; 22.01.2021
comment
@AbdouOuahib sama-sama. Ya, itu kasus yang cukup menyedihkan :) - person am0wa; 27.01.2021