webpack4知识点—babel

解析es6:使用babel-loader

先下载依赖包

npm i @babel/core @babel/preset-env babel-loader -D

module.exports={
    module:{
        rules:[
            {
                test/\.js$/,  //————>指定匹配规则
                use:'babel-loader' //use指定使用loader名称
            }
        ]
    }
}

babel的配置文件是.babelrc

{
    "presets":[ //————>多个plugin 集合
        "@babel/preset-env"
    ],
    "plugins":[ //———>用来支持某个功能
        "@babel/proposal-class-properties"
    ]
}

• babel-loader解析es6语法也需要通过.babelrc进行配置 知道哪些语法需要解析，
• @babel/preset-env 就是告诉 babel-loader 需要解析的es6语法

preset: babel插件集合的预设，包含某些插件 plugin。显然像上面那样一个一个配置插件会非常的麻烦，为了方便，babel 为我们提供了一个配置项叫做 persets（预设）。

babel 模块

1.babel-core(核心)

babel 的核心 api 都在这个模块中。也就是这个模块会把我们写的 js 代码抽象成 AST 树；然后再将 plugins 转译好的内容解析为 js 代码。

2.babel-cli

babel-cli 是一个通过命令行对 js 文件进行转换的工具。
当然我们一般不会使用到这个模块，因为一般我们都不会手动去做这个工作，这个工作基本都集成到模块化管理工具中去了，比如 webpack、Rollup 等。

3.babel-node

babel-node 是 babel-cli 的一部分，所以它在安装 babel-cli 的时候也同时安装了。
它使 ES6+ 可以直接运行在 node 环境中。

4.babel-polyfill(内部集成了 core-js 和 regenerator)

babel只转换新的js语法，不转换新的API。因此需要babel-polyfill转换 es6 的 API 为 es5：如 Map,Set,Promise。
babel-polyfill 主要有两个缺点：

• 使用 babel-polyfill 会导致打出来的包非常大，很多其实没有用到，对资源来说是一种浪费。
• babel-polyfill 可能会污染全局变量，给很多类的原型链上都作了修改，这就有不可控的因素存在。

解决方法：
方法一： Babel6: babel-runtime & babel-plugin-transform-runtime
.babelrc 配置：

{
  "presets":[
    ["env"]
  ],
  "plugins":[
    [
      "transform-runtime",
      {
        "helpers":false, // defaults to true
        "polyfill": false, // defaults to true
        "regenerator": true,   // defaults to true
        "moduleName":  "babel-runtime" // defaults to "babel-runtime"
      }
    ]
  ]
}

我们在启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数，将一些浏览器不能支持的特性重写，然后在项目中使用。
由于采用了沙盒机制，这种做法不会污染全局变量，也不会去修改内建类的原型，所以会有重复引用的问题。
现在最好的实践应该是方法二，如下。
方法二：Babel7: 新增了 babel-preset-env，设置

"useBuiltIns":"usage"这个参数值就可以实现按需加载 babel-polyfill 。（具体如下👇）

useBuiltIns 配置

全局引入 babel-polyfill，这样打包后的整个文件体积必然是会变大，通过设置 "useBuiltIns":"usage"能够把 babel-polyfill 中你需要用到的部分提取出来，不需要的去除。

useBuiltIns 参数说明：

• false: 不对 polyfills 做任何操作
• entry: 根据 target 中浏览器版本的支持，将 polyfills 拆分引入，仅引入有浏览器不支持的 polyfill
• usage(新)：检测代码中 ES6/7/8 等的使用情况，仅仅加载代码中用到的 polyfills
  .babelrc 文件

{
  "plugins": [
    "transform-es2015-template-literals",  // 转译模版字符串的 plugins
  ],
  "presets": [
    [
      "env", {
        // 是否自动引入 polyfill，开启此选项必须保证已经安装了 babel-polyfill
        // “usage” | “entry” | false, defaults to false.
        "useBuiltIns": "usage"
      }
    ],
    "stage-2"
  ]
}

plugins 与 presets 同时存在的执行顺序

• 先执行 plugins 的配置项,再执行 presets 的配置项;
• plugins 配置项，按照声明顺序执行;
• presets 配置项，按照声明逆序执行。

eg:👆上面代码的执行顺序是

• transform-es2015-template-literals
• stage-2
• env

方案对比

方案	优点	缺点
@babel/runtime & @babel/plugin-transform-runtime	按需引入, 打包体积小	不能兼容实例方法
@babel/polyfill	完整模拟 ES2015+ 环境	打包体积过大, 污染全局对象和内置的对象原型
@babel/preset-env	按需引入, 可配置性高	--

babel7更新

1. preset 的变更：

淘汰 es201x，删除 stage-x，推荐 env
如果你还在使用 es201x，官方建议使用 env 进行替换。淘汰并不是删除，只是不推荐使用。
但 stage-x 是直接被删了，也就是说在 babel7 中使用 es201X 是会报错的。

2. 包名称变化

把所有 babel-* 重命名为 @babel/*，
例如：

• babel-cli —> @babel/cli。
• babel-preset-env —> @babel/preset-env

3. 低版本 node 不再支持

babel 7.0 开始不再支持 nodejs 0.10, 0.12, 4, 5 这四个版本，相当于要求 nodejs >= 6。
还有一些包从其他包独立出来的变化等等

我的个人博客,有空来坐坐