webpack/babel“使用preset-env/browserlist时,您可能需要额外的加载程序来处理”

ngynwnxp  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(607)

我得到这个错误:

ERROR in ./assets/scripts/helpers/react-form.ts 7:26
Module parse failed: Unexpected token (7:26)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { arrayIncludes, arrayRemove, toBool } from "../kb";
| export var Store = /*#__PURE__*/function () {
>   function Store(readonly data, readonly setData, readonly initialData) {}
|
|   var _proto = Store.prototype;

该行周围的实际源代码如下所示:

export class Store<T extends Record<string,any>=Record<string,any>> {
    constructor(readonly data: T, readonly setData: Setter<T>, readonly initialData: T) {}

所以它 * 是 * 转换它一点点,但它似乎并没有放弃readonly的一些原因.我的babel配置看起来像:

{
    "browserslistConfigFile": ".browserslistrc",
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ],
    "presets": [
        "@babel/preset-typescript",
        ["@babel/preset-env", {
            "useBuiltIns": "entry",
            "shippedProposals":  true,
            "corejs": "3.25.1",
            "modules": false,
            "loose": true
        }]
    ],
    "env": {
        "development": {
            "plugins": [
                "react-refresh/babel"
            ],
            "presets": [
                ["@babel/preset-react", {"development":  true}]
            ]
        },
        "production": {
            "plugins": [
                "@babel/plugin-transform-react-constant-elements",
                "babel-plugin-unassert"
            ],
            "presets": [
                ["@babel/preset-react", {"development":  false}]
            ]
        }
    }
}

也就是说,@babel/preset-typescript应该负责TypeScript转换,而@babel/preset-env应该负责其余的转换。这里的问题是什么?
它在Webpack 4中工作得很好,但后来我升级了一吨的包,有些东西坏了(包括改为Webpack 5),但我不知道现在去哪里找。
还有我的tsconfig:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noImplicitReturns": true,
        "pretty": true,
        "module": "esnext",
        "suppressImplicitAnyIndexErrors": false,
        "lib": [
            "ESNext",
            "dom"
        ],
        "skipLibCheck": false,
        "target": "es2018",
        "declaration": false,
        "resolveJsonModule": false,
        "esModuleInterop": true,
        "jsx": "react-jsx",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "noEmit": true,
        "allowJs": true,
        "isolatedModules": true
    },
    "include": [
        "assets/scripts/**/*.ts",
        "assets/scripts/**/*.tsx",
    ],
    "exclude": [
        "assets/scripts/libs"
    ]
}
pcww981p

pcww981p1#

这是https://github.com/babel/babel/issues/12152
我需要在我的babel.config.json中切换我的presets的顺序。应该是:

"presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "entry",
            "shippedProposals":  true,
            "corejs": "3.25.1",
            "modules": false,
            "loose": true
        }],
        ["@babel/preset-typescript",{
            "onlyRemoveTypeImports": true,
            "allowDeclareFields": true,
            "allowNamespaces": true
        }]
    ],

相关问题