webpack4知识点—babel

[color=rgba(0, 0, 0, 0.75)][url=]版权[/url]



解析es6:使用babel-loader

先下载依赖包

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

• 1
  

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
  

babel的配置文件是.babelrc

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
  

• 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"      }      }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
  

我们在启用插件 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"  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
  

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。
还有一些包从其他包独立出来的变化等等