babel 7.x -无法解决‘核心-js/模块/es.array.conat’

Question

我升级了babel 6.x → 7.x，但在运行Webpack时遇到了问题。

它在抱怨core-js/modules/*的缺失。

我的babel.config.js在根目录中。我将以前存在的.babelrc转换为js (.babelrc也产生了相同的错误)。我猜这是与所有核心，corejs2，运行时的东西有些冲突。

我的src中有两个应用程序，我的和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";
...

package.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",
}

babel.config.js

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
}

Answer 1

引用Babel 7.4.0 发布的话：

@babel/polyfill不是插件或预置，而是一个运行时包:如果我们添加了在core-js@2和core-js@3之间切换的选项，那么这两个包版本都需要包含在包中。出于这个原因，我们决定放弃它:如果您正在转换生成器，那么您现在应该加载用于多填充的core-js，以及重新生成器-运行时/运行时：

由于您使用的是7.4.3版本的babel，@babel/polyfill可能无法像预期的那样工作。相反，请手动添加core-js和regenerator-runtime。引用core-js3 release 公告

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

Answer 2

我也遇到了同样的问题，而且经常会忘记安装另一个软件包：

@babel/运行时-corejs3 3“："^7.5.5"，

不要忘记将其安装在问题所在的同一级别(开发、本地或生产)级别：

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

因此，通常，当版本中存在明显的依赖项更新更改，并且与以前的版本不向后兼容(API更改)时，就会发生这种错误。实际上，corejs3与corejs2或更高版本完全不兼容。

Answer 3

我找到了可能的答案。要解决此错误，可以将core-js版本降级为2.5.7。此版本产生正确的目录结构，并有单独的ES6和ES7文件夹。

要降低版本的级别，只需运行：

npm i -S核-js@2.5.7