javascript - Webpack 4 + Babel 7.4.0 + Babel Polyfill

问题描述

我正在尝试改进对我用 ES6 编写的应用程序@babel/polyfill的支持和browserslist支持。我已经按照https://babeljs.io/docs/en/babel-polyfill上的所有说明进行操作，但我认为我遗漏了一些东西。

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

有什么想法为什么我在编译的代码中看不到 polyfill？我曾经在入口点声明 polyfill，但 babel 文档现在说这不是必需的。

如果在 .babelrc 中指定了 useBuiltIns: 'usage' 则不要在 webpack.config.js 条目数组或源中包含 @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']
        }
    }
}]

标签： javascriptwebpackbabeljs

从 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 现在直接用于 polyfill。
安装最新版本的 core-js

npm install --save core-js@3

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

由于 core-js 版本 2 和 3 互不兼容，默认不启用。

如果你使用@babel/preset-env，你需要启用 corejs: 3 选项.babelrc：

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 导入到我们花哨的东西所在的每个其他文件中。

javascript - Webpack 4 + Babel 7.4.0 + Babel Polyfill

问题描述

解决方案

推荐阅读