前沿：文章起源在于，敌人跟树酱说在解决我的项目兼容IE11浏览器过程中，遇到“目迷五色”的babel配置和插件等，傻傻分不清配置间的区别、以及不理解如何援用babel插件能力让性能更佳，如果你也有这方面的疑虑，这篇文章可能适宜你

1.babel

babel是个什么玩意？ Babel实质上是一个编辑器，也就是个“翻译官”的角色，比方树酱听不懂西班牙语，须要他人帮我翻译成为中文，我才知道。那么Babel就是帮忙浏览器翻译的，让web利用可能运行旧版本的浏览器中，比方IE11浏览器不反对Promise等ES6语法，那这个时候在IE11关上你写的web利用，利用就无奈失常运行，这时候就须要Babel来“翻译”成为IE11能读懂的

1.1 Babel是怎么工作的？

实质上独自靠Babel是无奈实现“翻译”，比方官网的例子const babel = code => code;不借助Babel插件的前提，输入是不会把箭头函数“翻译”的，如果想实现就须要用到插件，更多概念点点击 官网文档

Babel工作原理实质上就是三个步骤：解析、转换、输入，如下所示，

1.2 AST 是什么玩意？

啊斌同学： 下面说到的形象语法树AST又是什么玩意？

答：咱们上文提到，Babel在解析是时候会通过将code转换为AST形象语法树，实质上是代码语法结构的一种形象示意，通过以树形的构造模式体现出它的语法结构，形象在于它的语言状态不会体现在原始代码code中

上面介绍下在前端我的项目开发中一些AST的利用场景:

  • Vue模版解析： 咱们平时写的.vue文件通过vue-template-compiler解析，.vue文件解决为一个AST
  • Babel的“翻译” : 如将ES6转换为ES5过程中转为AST
  • webpack的插件UglifyJS： uglifyjs-webpack-plugin用来压缩资源，uglifyjs会遇到须要解析es6语法，这个过程中实质上也是借助babel-loader

你能够装置通过本地装置babel-cli做个验证，通过babel-cli编译js文件，玩玩“翻译”

举荐浏览：

  • 阮一峰 - Babel 入门教程

1.3 开发本人的babel插件须要理解什么？

啊可同学： 树酱，我想本人应用AST开发一个babel插件须要应用到哪些货色呢？

答：咱们上一节中提到babel不借助“外援”的话，本人是无奈实现翻译，而一个残缺的“翻译”的过程是须要走完解析、转换、输入能力实现整个闭环，而这其中的每个环节都须要借助babel以下这些API

  • @babel/parser： babel解析器将源代码code解析成 AST
  • @babel/generator: 将AST解码生成js代码 new Code
  • @babel/traverse : 用来遍历AST树，能够用来革新AST～，如替换或增加AST原始节点
  • @babel/core：包含了整个babel工作流

上面是一个简略“翻译”的demo～

：啊宽同学：你不是说@babel/parser是也将源代码code解析成 AST吗？为啥@babel/core也是？

答：@babel/core蕴含的是整个babel工作流，在开发插件的过程中，如果每个API都独自去引入岂不是蒙蔽了来吧～于是就有了@babel/core插件，顾名思义就是外围插件，他将底层的插件进行封装（蕴含了parser、generator等），进步原有的插件开发效率，简化过程，好一个“肯德基全家桶”

举荐浏览：

  • Babel 插件手册
  • 实现一个真正的babel插件
  • 了解babel的基本原理和应用办法

1.4 Babel插件相干

讲完Babel的根本应用，接下来聊聊插件，上文提到独自靠babel是“难成大器”的，须要插件的辅助能力实现霸业，那插件是怎么搞的呢？

通过第一节的学习咱们晓得实现第一步骤解析完AST后，接下来是进入转换，插件在这个阶段就起到关键作用了。

1.4.1 插件的应用

通知Babel该做什么之前，咱们须要创立一个配置文件.babelrc或者babel.config.js文件

如果我想把es2015的语法转化为es5 及反对es2020的链式写法，我能够这样写

上图所示，咱们能够看到咱们配置两个货色 present和plugin

啊可同学：babel不是只须要plugin来帮忙翻译吗，这个present又是什么玩意？

答：presets是预设，举个例子：有一天树酱要去肯德基买鸡翅、薯条、可乐、汉堡。而后我发现有个套餐A蕴含了(薯条、可乐、汉堡)，那这个present就相当于套餐A，它蕴含了一些插件汇合，一个大套餐，这样我就只须要一个套餐A+鸡翅就搞定了，不必配置很多插件。

就好比下面的es2015“套餐”，其实就是Babel团队将同属ES2015相干的很多个plugins汇合到babel-preset-es2015一个preset中去

啊琪同学：@babel/preset-env这个是什么？我看很多babel的配置都有

答：@babel/preset-env这个是一个present预设，换句话说就是“奢华大礼包”，包含一系列插件的汇合，蕴含了咱们罕用的es2015,es2016, es2017等最新的语法转化插件，容许咱们应用最新的js语法，比方 let，const，箭头函数等等，但不包含stage-x阶段的插件。换句话说，他蕴含了咱们上文提到了es2015，是个“全家桶”了，而不仅是个套餐了。

1.4.2 自定义 present

啊斌同学：树酱，那我是不是能够本人搞一个预设present？

答: 能够的，然而你能够以 babel-preset-* 的命名标准来创立一个新我的项目，而后创立一个packjson并装置好定影的依赖和一个index.js 文件用于导出 .babelrc，最终公布到npm中，如下所示

1.4.3 对于 polyfill

比方咱们在开发中应用，会应用到一些es6的新特色比方Array.from等，但不是所有的 JavaScript 环境都反对 Array.from，这个时候咱们能够应用 Polyfill（代码填充，也可译作兼容性补丁）的“黑科技”，因为babel只转换新的js语法，如箭头函数等，但不转换新的API，比方Symbol、Promise等全局对象，这时候须要借助@babel/polyfill，把es的新个性都装进来，应用步骤如下
  • npm 装置 : npm install --save @babel/polyfill
  • 文件顶部导入 polyfill: import @babel/polyfilll

♂️：毛病：全局引入整个 polyfill包，如promise会被全局引入，净化全局环境，所以不倡议应用，那有没有更好的形式？能够间接应用@babel/preset-env并批改配置，因为@babel/preset-env蕴含了@babel/polyfill插件，看下一节

1.4.4 如何通过批改@babel/preset-env配置优化

实现下面的配置，而后用Babel编译代码，咱们会发现有时候打出的包体积很大，因为@babel/polyfill有些会被全局援用，那你要弄清楚@babel/preset-env的配置

@babel/preset-env 中与 @babel/polyfill 的相干参数有两个如下：

  • targets: 反对的指标浏览器的列表
  • useBuiltIns: 参数有 “entry”、”usage”、false 三个值。默认值是false，此参数决定了babel打包时如何解决@babel/polyfilll 语句

次要聊聊对于useBuiltIns的不同配置如下：

  • entry: 去掉指标浏览器已反对的polyfilll 模块，将浏览器不反对的都引入对应的polyfilll 模块。
  • usage: 打包时会主动依据理论代码的应用状况，联合 targets 引入代码里理论用到局部 polyfilll模块
  • false: 不会主动引入 polyfilll 模块，对polyfilll模块屏蔽

倡议：应用 useBuiltIns: usage来依据指标浏览器的反对状况，按需引入用到的 polyfill 文件，这样打包体积也不会过大

1.4.5 webpack打包如何应用babel？

对于@babel/core、@babel/preset-env 、@babel/polyfill等这些插件，当咱们在应用webpack进行打包的时候，如何让webpack晓得按这些规定去编译js。这时就须要babel-loader了，它相当于一个两头桥梁，通过调用babel/core中的API来告知webpack要如何解决。

1.4.6 开发工具库，波及到babel应用怎么防止污染环境？

啊斌同学：我开发了一个工具库，也应用了babel，如果援用polyfill,如何防止应用导致的污染环境？

答：在开发工具库或者组件库时，就不能再应用babel-polyfill了，否则可能会造成全局净化，能够应用@babel/runtime。它不会净化你的原有的办法。遇到须要转换的办法它会另起一个名字，否则会间接影响应用库的业务代码，应用@babel/runtime次要在于

  • 能够减小库和工具包的体积，躲避babel编译的工具函数在每个模块里都反复呈现的状况
  • 在没有应用 @babel/runtime 之前，库和工具包个别不会间接引入 polyfill。否则像 Promise 这样的全局对象会净化全局命名空间，这就要求库的使用者本人提供 polyfill。这些 polyfill 个别在库和工具的应用阐明中会提到，比方很多库都会有要求提供 es5 的 polyfill。在应用 babel-runtime 后，库和工具只有在 package.json 中减少依赖 babel-runtime，交给 babel-runtime 去引入 polyfill就能够了

如何应用 @babel/runtime

  • 1.npm装置
npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtime
  • 2.配置

1.5 对于babel容易混同的点

1.5.1 babel-core和@babel/core 区别

：啊呆同学：babel-core和@babel/core是什么区别？

答；@babel是在babel7中版本提出来的，就相似于 vue-cli 降级后应用@vue/cli一样的情理，所以babel7当前的版本都是应用 @babel 结尾申明作用域，