Webpack 4 + Babel 7.4.0 + Babel Polyfill

Question

Webpack 4 + Babel 7.4.0 + Babel Polyfill

6

我正在尝试通过 @babel/polyfill 和 browserslist 改善我的应用程序的支持，该应用程序是用 ES6 写的。我已经遵循了 https://babeljs.io/docs/en/babel-polyfill 上的所有说明，但我觉得我漏掉了些什么。

我的 browserslist 支持是通过 package.json 定义的。我通过检查代码中使用的 Array.from polyfill 来验证安装是否成功。

为什么我看不到编译后的代码中的 polyfill 呢？以前我会在入口点声明 polyfill，但是现在 babel 文档说这不再需要。

如果在 .babelrc 中指定了 useBuiltIns: 'usage'，则不要在 webpack.config.js 的 entry 数组中或源文件中包含 @babel/polyfill。注意，仍然需要安装 @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']
        }
    }
}]

- dtsn

你的代码在所有支持的浏览器中都能按预期工作吗？ - agfc

不行，在IE10/IE11中无法工作（缺少Array.from polyfill）。 - dtsn

在这种情况下，您可能希望在包含高级功能的组件中导入"@babel/polyfill"。至少这是我在使用Babel 7、webpack等工具时必须要做的事情... - agfc

这是我默认的选项，但文档说它不是必需的，所以想确认一下。 - dtsn

所有前端相关的文档都处于“beta”状态，因此永远不会完美无缺。由于太多组件需要协同工作，因此不可能制定一个单一稳定的方案。至少，这是我的经验。 - agfc

你可以尝试更新... @babel/preset-env（7.4.4），它会根据你的浏览器列表配置为我添加 Array.from，并且我在源代码中使用了 Array.from。我没有尝试过你的插件（如果有影响，我正在使用其他插件与 rollup）。 - Brett Zamir

2个回答

0

在组件中添加您的花哨东西。

import "@babel/polyfill";

至少这是我在使用Babel 7、Webpack 4和React时必须要做的。我知道文档上说的不一样，但我还没有看到适用于我的堆栈的示例。

- agfc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ayesha Iftikhar · Accepted Answer

从Babel 7.4.0开始，@babel/polyfill已经被弃用。随着Babel 7.4.0对polyfill的处理方式发生了变化，所有在@babel/polyfill中提供的polyfill都是由一个名为core-js的软件包提供的。 Babel 7.4使用了这个软件包的最新版本core-js@3，与先前版本（core-js@2）不兼容，因此我们需要对配置进行一些更改。

现在我们可以采取以下措施：

- 更新@babel/core和@babel/preset-env - 从依赖项中删除@babel/polyfill。由于现在直接使用core-js进行填充。 - 安装最新版本的core-js

``` npm install --save core-js@3 ```

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

由于core-js的2和3版本不兼容，因此默认情况下未启用。如果您正在使用@babel/preset-env，则需要在.babelrc文件中启用corejs:3选项：

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

如此处所述：

当使用core-js 3时，useBuiltIns: "entry"选项不仅会转换import "core-js"导入，还会转换regenerator-runtime/runtime以及所有嵌套的core-js入口点。

请查看官方文档链接以获取更多信息。

另外，现在我们不需要在每个包含我们想要使用的高级功能的文件中都导入core-js。