Webpack 4 + Babel 7.4.0 + Babel Polyfill [英] Webpack 4 + Babel 7.4.0 + Babel Polyfill
问题描述
我正在尝试通过 @ babel/polyfill 和 browserslist 支持对ES6中编写的应用程序提供更好的支持.我已经按照 https://babeljs.io/docs/en/babel上的所有说明进行操作-polyfill ，但我想我缺少了一些东西.
I am trying to improve the support for my application which is written in ES6 via @babel/polyfill and the browserslist support. I've followed all the instructions over on https://babeljs.io/docs/en/babel-polyfill but I think I am missing something.
我的浏览器列表支持是通过我的package.json定义的.我通过检查 Array.from (在整个代码中都使用了)polyfill来验证安装是否正常.
My browserslist support is defined via my package.json. I am validating whether the install has worked by checking for Array.from (which is used throughout the code) polyfill.
有什么想法为什么在编译后的代码中看不到polyfill?我曾经在入口点声明polyfill，但是babel文档现在说这是不需要的.
Any ideas why I can't see the polyfills in the compiled code? I use to declare the polyfill in the entrypoint, but the babel docs now says this isn't needed.
如果useBuiltIns:在.babelrc中指定了'usage'，则在webpack.config.js条目数组或源文件中都不要包含@ babel/polyfill.注意，仍然需要安装@ babel/polyfill.
If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed.
...
"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文件如下:
My webpack file looks like this:
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
推荐答案
从Babel 7.4.0开始，@ babel/polyfill已被弃用.使用Babel 7.4.0，对填充的工作方式进行了更改.@ babel/polyfill中提供的所有这些polyfill由一个名为core-js的软件包提供.Babel 7.4使用此软件包的最新版本core-js @ 3，与先前版本(core-js @ 2)不兼容，因此我们将必须对配置进行一些更改.
As of Babel 7.4.0, @babel/polyfill has been deprecated. With Babel 7.4.0 there has been changes to the way polyfilling works. All those polyfills that were provided in @babel/polyfill were provided by a package called core-js. Babel 7.4 uses the newest version of this package, core-js@3, which is incompatible with the previous version (core-js@2), so we will have to make some changes to our config.
这是我们现在可以做的:
Here's what we can do now:
- 更新@ babel/core和@ babel/preset-env
-
从依赖项中删除@ babel/polyfill.由于core-js现在直接用于polyfills.
- Update @babel/core and @babel/preset-env
Remove @babel/polyfill from the dependencies. Since core-js is now being used directly for the polyfills.
安装最新版本的core-js
Install the newest version of core-js
npm install-保存core-js @ 3
最后，从core-js @ 2迁移到core-js @ 3
And lastly, Migrate from core-js@2 to core-js@3
由于core-js的第2版和第3版互不兼容，因此默认情况下未启用.
Since versions 2 and 3 of core-js are incompatible with each other, it isn't enabled by default.
如果使用@ babel/preset-env，则需要在 .babelrc 中启用corejs:3选项:
If you are using @babel/preset-env, you need to enable the corejs: 3 option in .babelrc:
presets: [
["@babel/preset-env", {
useBuiltIns: "usage", // or "entry"
corejs: 3,
}]
]
使用core-js 3时，useBuiltIns:"entry"选项不仅可以转换导入的"core-js"导入，还可以转换regenerator-runtime/runtime和所有嵌套的core-js入口点.
When using core-js 3, the useBuiltIns: "entry" option not only transforms import "core-js" imports, but also regenerator-runtime/runtime and all the nested core-js entry points.
请按照此官方文档链接以获得更多信息.
Please follow this official documentation link for more information.
此外，现在我们不需要将core-js导入到我们喜欢的东西所驻留的每个其他文件中.
Also, now we don't need to import core-js to every other file where our fancy stuff resides.
这篇关于Webpack 4 + Babel 7.4.0 + Babel Polyfill的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
