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

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";
...

包.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 release :

@babel/polyfill isn't a plugin or preset, but a runtime package: if we added an option to switch between core-js@2 and core-js@3, both the package versions would need to be included in your bundle. For this reason, we decided to deprecate it: you now should load core-js for polyfills, and regenerator-runtime/runtime if you are transforming generators:

当您使用时 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