乐趣区

关于前端:Babel配置傻傻看不懂

jiezi

前沿：文章起源在于，敌人跟树酱说在解决我的项目兼容 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-runtime
npm 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 结尾申明作用域，

退出移动版