Webpack 4+ Babel 7.4.0 + Babel填充

Question

我正在努力改进对我的应用程序的支持，它是通过ES6通过@babel/polyfill和browserslist支持编写的。我已经遵循了https://babeljs.io/docs/en/babel-polyfill上的所有说明，但我想我遗漏了一些东西。

我的browserslist支持是通过package.json定义的。我正在通过检查Array.from (它在整个代码中使用)来验证安装是否有效。

知道为什么我不能看到编译代码中的多填充吗？我过去常常在入口点声明多边形填充，但是babel文档现在说这是不需要的。

如果useBuiltIns：‘.babelrc’是在.babelrc中指定的，那么在webpack.config.js条目数组或源中都不要包含@babel/poly座。请注意，仍需安装@babel/polyfill。

 ...
  "browserslist": [
    "last 2 version",
    "> 1%",
    "IE 10"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.4.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.4",
    "babel-preset-env": "^1.7.0",
    "chromedriver": "^2.41.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.4",
    "env2": "^2.2.2",
    "file-loader": "^1.1.11",
    "html-critical-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "lunr": "^2.3.5",
    "mini-css-extract-plugin": "^0.4.1",
    "nightwatch": "^0.9.21",
    "node": "^7.10.1",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "replace-in-file-webpack-plugin": "^1.0.6",
    "sass-loader": "^7.0.3",
    "selenium-server": "^3.14.0",
    "selenium-standalone": "^6.15.6",
    "style-loader": "^0.21.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.0",
    "bootstrap": "^4.1.3",
    "handlebars": "^4.1.0",
  }

我的.babelrc文件如下所示：

{
    "presets": [
        [
            "@babel/preset-env", {
                "useBuiltIns": "usage"
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"],
}

我的webpack档案是这样的：

{
    test: /\.js$/,  
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
}]

Answer 1

从Babel 7.4.0开始，@babel/polyfill已被废弃。在Babel 7.4.0中，填充物的工作方式发生了变化。@babel/polyfill中提供的所有这些填充都是由一个名为core-js的包提供的。Babel 7.4使用了这个包的最新版本-- core-js@3，它与以前的版本(core-js@2)不兼容，所以我们必须对配置进行一些更改。

我们现在能做的是：

• 更新@babel/core和@babel/预设-env
• 从依赖项中删除@babel/poly填充。因为core-js现在直接用于填充。
• 安装核心js的最新版本。

npm install --save core-js@3

最后，从core-js@2迁移到core-js@3。

由于核心js的版本2和3互不兼容，默认情况下不启用它。

如果使用@babel/preset-env，则需要在.babelrc中启用corejs: 3选项。

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage", // or "entry"
    corejs: 3,
  }]
]

如前所述，这里

当使用core-js 3时，useBuiltIns：" entry“选项不仅转换导入" core-js”导入，还转换再生器-运行时/运行时和所有嵌套的核心-js入口点。

有关更多信息，请参考此正式文档链接。

另外，现在我们不需要将core-js导入到其他所有我们喜欢的东西所在的文件中。

Answer 2

在添加花哨内容的组件中

import "@babel/polyfill";

至少这就是我对巴贝尔7，Webpack 4和反应所做的。我知道docs说的不是，但我还没有看到能与我的堆栈一起工作的例子。