babel 6.x 随笔

0.准备回到我的后端温床了，hhh…

“中文”官方文档 by babel-中文网

知乎专栏"一口（很长的）气了解 babel" by 百度大佬-小蘑菇小哥

Babel 配置用法解析 by cnblog-大牛

1.概述

js的编译器,用于向后兼容环境(node、浏览器)

实际上，将ES6+等高级语法转译成ES5的语法，在js语法支持较弱的环境中运行是 安全 且 流行 的做法！

使用场景：es6=>es5 、 JSX => js

2.@babel/loader

大型项目中，替代@babel/cli的、webpack规范的一个loader

能够在webpack打包(代码混淆)之前，转译js

3.@babel/cli

babel提供的命令行工具

如果修改了babel.config.js的配置，需要重新编译项目

4. @babel/plugin-*

babel的转译能力根据功能不同，分化到不同的插件中
	既然babel呈插件形态，那么使用时需要加入配置文件
	配置文件：根目录下的 .babelrc 或者 package.json
plugin可以认为是在一个模块(例如ES6)在细粒度上进一步的拆分，供按需引入。

5. @babel/preset-env（预设）

preset可以认为是为 简化功能相近的多个plugin的安装和配置 而生的一个“套餐”

官方文档可以看到有四类，目前主推的是env

通过preset可以转义ES6+的语法，却无法转义其新增的API(Promise、Symbol、Generator),需要使用@babel/ployfill

5.1 配置项

5.1.1 targets

指定对 特定浏览器的特定版本 的支持

5.1.2 modules

因为默认import会被babel转译成require,modules:false=>最终编译之后保留源代码的引入方式

可选项：amd" | “umd” | “systemjs” | “commonjs” | “cjs” | “auto” | false，默认auto

5.1.3 useBuiltIns

可选项：“usage”| “entry”| false，默认false

usage:根据代码中使用的API+配置浏览器的支持，按需引进

entry:根据配置的浏览器的支持，按需引进

5.1.4 corejs

babel官方对core-js2和core-js3(两者存在重大差异)的过渡支持的并不是很平滑

建议将@babel/ployfill拆分成两个包，按core-js的详细版本引入

6.@babel/polyfill

由 core-js2 + regenerator-runtime组成的集成包

用于转义ES6+的新增API

可能导致问题：@babel/polyfill 这个大包 对新增api的处理时，会将所有的方法都直接加到对象的原型链上 -> 可能造成浪费 => 直接对原型链操作，必然导致全局变量的污染。(@babel/plguin-transform-runtime可破)

7.@babel/runtime

这个包囊括了 core-js 和regenerator-runtime、@babel/helpers

7.1 @babel/plugin-transform-runtime

这个包跟@babel/runtime的组成并没有什么关系

@babel/runtime 配合 @babel/plugin-transform-runtime 可以实现将一些非常复杂的js语法抽取成一个公共方法，这样子在@babel/helpers转义后，可以有效地减少代码量

再者，该插件可以提供一个“沙箱”环境，可以在不污染全局变量的情况下解决新增API的转译问题，注意需要配置具体的core-js版本

将对象的重复声明=>重复引用

7.2 @babel/helpers

辅助转译一些非常复杂的js语法

7.3 regenerator

支持 generator/yield 和 async/await 语法的转译

7.4 core-js

转换一些内置类：Symbol、Promise和一些静态方法

8.@babel/node

node.js环境下的js转译库