Babel.js 无法解析“core-js/modules/es.数组.concat”

4dbbbstv  于 2023-03-16  发布在  Babel
关注(0)|答案(4)|浏览(534)

我升级了babel 6.x → 7.x,但在运行 Webpack 时出现问题。
它抱怨缺少core-js/modules/*
我的babel.config.js在根目录下。我把以前存在的.babelrc转换成js(.babelrc也产生了同样的错误)。我猜这是与所有核心,corejs2,运行时的东西的一些冲突。
我的源代码中有两个应用程序,mine和Styleguidist(在./node_modules中)。我的应用程序可以移植并使用这些相同的 package.json/babel.config,但Styleguidist不能。
运行带有webpack的Styleguidist时出错:

Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/project/src/node_modules/react-styleguidist/lib/client/rsg-components/Slot'

/node_modules/react-styleguidist/lib/client/rsg-components/Slot.js

import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.filter";
...

软件包. json

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime-corejs2": "^7.4.3",
}
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.4.3",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.0",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
}

数据库配置

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-react-jsx',
        'transform-vue-jsx',
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"],
    comments: false
}
nhn9ugyo

nhn9ugyo1#

引用自Babel 7.4.0release
@babel/polyfill不是一个插件或预设,而是一个运行时包:如果我们添加了一个选项来在core-js@2和core-js@3之间切换,那么这两个软件包版本都需要包含在您的包中。2因此,我们决定弃用它:现在你应该加载core-js来进行多边形填充,如果你正在转换生成器,那么你应该加载regenerator-runtime/runtime:
由于您使用的是7.4.3版本的babel,@babel/polyfill可能无法正常工作。请手动添加core-jsregenerator-runtime。引用core-js3发布公告:

Instead of

import "@babel/polyfill";

you should use those 2 lines:

import "core-js/stable";
import "regenerator-runtime/runtime";

Don't forget install those dependencies directly!

npm i --save core-js regenerator-runtime
lnlaulya

lnlaulya2#

我有同样的问题,经常发生我忘记有另一个软件包安装为:
“@babel/运行时内核js 3”:“^7.5.5”,
不要忘记将其安装在您遇到问题的同一级别(开发、本地或生产):

npm i -D(or --save-dev) @babel/runtime-corejs3

因此,一般来说,当版本中的依赖项更新发生重大变化,并且与以前的版本不向后兼容(API变化)时,就会发生这种错误。事实上,corejs 3与corejs 2或更旧版本根本不兼容。

hs1rzwqc

hs1rzwqc3#

我找到了可能的答案。要解决这个错误,你可以将core-js版本降级到2.5.7。这个版本产生正确的目录结构,有单独的ES6和ES 7文件夹。
要降级版本,只需运行:
npm i -S核心-js@2.5.7

31moq8wy

31moq8wy4#

首先,您需要找出错误是抱怨corejs 3还是corejs 2,这很容易,如果错误说类似Module not found: Error: Can't resolve 'core-js/modules/es6.array.fill,那么它就是corejs 2;如果错误代码是Module not found: Error: Can't resolve 'core-js/modules/es.array.concat',那么它就是corejs 3,这是因为正如corejs的作者在core-js@3、babel和展望未来时所解释的那样
在以前版本的core-js中,为稳定ECMAScript功能和ECMAScript建议使用多边形填充的模块带有前缀es6.es 7.
所以你需要corejs 3,而你的@babel/runtime-corejs2": "^7.4.3"是错误的(这就是你得到错误的原因)。根据我的经验,巴别塔7与corejs 3配合得最好。
第二,core-js的作者说it's 3 different ways of core-js usage. You should use only one of them

  1. core-js直接导入
    1.通过使用来自@babel/preset-env的插件注入core-js
    1.通过@babel/transform-runtime插件实现无全局污染的core-js注入
    你不需要直接导入corejs到你的代码中(正如一个答案所建议的)。第二个/第三个选项更容易。我从来没有直接导入corejs到我的代码中。使用useBuiltIns来使用第二个选项。babel文档解释了关于useBuiltIns选项在preset-env中的解释。
    Babel文档解释了www.example.com中的第三个选项https://babeljs.io/docs/babel-plugin-transform-runtime#options
    第二个/第三个选项的区别在于core-jscore-js-pure的区别,正如作者在core-js 3 release note中所说,
    将没有全局名称空间污染的版本提取到一个单独的core-js-pure包中(替换core-js/library)。
    如果使用第3个选项,则使用npm install --save @babel/runtime-corejs3而不是npm i core-js(用于第2个选项)

相关问题