webpack4知识点—babel
版权解析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-clibabel-cli 是一个通过命令行对 js 文件进行转换的工具。
当然我们一般不会使用到这个模块，因为一般我们都不会手动去做这个工作，这个工作基本都集成到模块化管理工具中去了，比如 webpack、Rollup 等。3.babel-nodebabel-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。
还有一些包从其他包独立出来的变化等等
页:
[1]