Babel 的两种配置 https://juejin.cn/post/6999536229389697054
作者：zeroone001
链接：https://juejin.cn/post/6999536229389697054
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Webpack5 系列（四）：Babel 的配置 https://juejin.cn/post/6999188157992271886?utm_source=gold_browser_extension 作者：陶瓷里的小星星
链接：https://juejin.cn/post/6999188157992271886
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

babel的配置有两种方案

背景

之前只是在公司项目里配置，没有汇总起来，周末的时候，在跟同事讨论了一下，把配置记下来

关于polyfill

其实core-js@3 和 @babel/polyfill 都是polyfill
在 Babel > 7.4.0 之前，通常我们会安装 babel-polyfill 或 @babel/polyfill来处理实例方法和ES+新增的内置函数
7.4.0之后, 我们只需要安装core-js@3来代替@babel/polyfill就可以了
Babel7.4.0版本开始，babel/polyfill 已经被废弃，推荐直接使用core-js
其实polyfill本身就是stable版本的core-js和regenerator-runtime的合集 ```javascript import ‘@babel/polyfill’; // 等于上面的 import ‘core-js/stable’; import ‘regenerator-runtime/runtime’;

<a name="tqkRW"></a>
## 两种配置都要安装的依赖
```javascript
npm i babel-loader @babel/core @babel/preset-env -D

一，正常配置

首先装一下依赖

npm i core-js@3 -S

// 先下载依赖 npm i core-js@3 -S
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4.4"]
                }, // 浏览器的支持范围
                "corejs": 3, // 这个属性，
                      //    只有在useBuiltIns为usage或者entry的时候起作用，这里记得要安装 core-js@3
                "useBuiltIns": "usage" // 按需引入 core-js 中的模块
            }
        ]
    ]
}

二，更优的配置, Babel >= 7.4.0

原因：

为代码创建沙盒环境，如果直接导入core-js或@babel/polyfill及其提供的Promise、Set和Map等内置组件，这些将污染全局。
如果代码是要发布给其他人使用的库，或者无法准确控制代码运行的环境，则会出现问题。

第一步，先安装依赖

npm install @babel/plugin-transform-runtime -D
npm install --save @babel/runtime @babel/runtime-corejs3

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4.4"]
                }, // 浏览器的支持范围
            }
        ]
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": 3
        }]
    ]
}

参考资料

最后的备注

Babel 版本更新后，很多内容已经发生变化，官方文档也是晦涩难读，而中文网上的文章很多都已经过时，好在我看到了一位大佬的文章，这才让我对 @babel/preset-env 和 @babel/plugin-transform-runtime 有了基本的认识。文章 link 放在文末，请自行阅读。

@babel/preset-env just transforms code with syntax, if we don’t config useBuiltIns.
@babel/transform-runtime can provide re-use helpers, but don’t polyfill by default.
Most situation best config: use @babel/preset-env transforms syntax. use @babel/transform-runtime avoid duplicate code, and config corejs: 3 to polyfill.

参考：www.zzuu666.com/articles/9

webpack

babel的两种配置