babel 7.x - 无法解析 'core-js/modules/es.array.concat'答案

【问题标题】：babel 7.x - Can't resolve 'core-js/modules/es.array.concat'babel 7.x - 无法解析 'core-js/modules/es.array.concat'
【发布时间】：2019-09-08 22:04:08
【问题描述】：

我升级了 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
}

【问题讨论】：

我查看了 Styleguidist 的 package.json，发现它们有“core-js”：“^3.0.0”。我将它添加到我的 package.json 中，现在它启动了！！谢谢，我。如果有人可以向我解释 15 种不同的 corejs 和 polyfill 的原因，我将不胜感激。
2 个应用程序正在运行，但 Jest 没有。

标签： babeljs webpack-4 babel-loader react-styleguidist

【解决方案1】：

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

要降级版本，只需运行：

npm i -S core-js@2.5.7

【讨论】：

【解决方案2】：

引用Babel 7.4.0release：

@babel/polyfill 不是插件或预设，而是一个运行时包：如果我们添加了一个在 core-js@2 和 core-js@3 之间切换的选项，则两个包版本都需要包含在你的捆绑包。出于这个原因，我们决定弃用它：你现在应该为 polyfills 加载 core-js，如果你正在转换生成器，则应该加载 regenerator-runtime/runtime：

由于您使用的是7.4.3 版本的 babel，@babel/polyfill 可能无法按预期工作。请改为手动添加core-js 和regenerator-runtime。引用core-js3 发布announcement：

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

【讨论】：

这个答案拯救了我的一天。
这正是我所需要的。

【解决方案3】：

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

"@babel/runtime-corejs3": "^7.5.5",

不要忘记将它安装在您遇到问题的同一级别（开发、本地或生产）级别：

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

因此，一般来说，当版本中的依赖项更新发生显着变化并且与以前的版本不向后兼容时，就会发生这种错误。实际上，corejs3 与 corejs2 或更早版本根本不兼容。

【讨论】：