Babel

[yaofly2012]

Babel handbook

Study

一、Babel是什么

1. Babel is a JavaScript compiler.
2. Use next generation JavaScript, today。Beyond!

是"源码到源码"的编译器。

说人话

1. 最初的工作就是把ES6+语法和API转成目标环境可以执行的语法（ES3，ES5）；
2. 后来强大到把各种形式的JS（Reat, TypeScript等）都转成目标环境可以执行的语法（ES3，ES5，ES6+）；
3. Beyond，反正可以通过操作AST语法树完成的工作都可以借助Babel完成。

• JS相关的优化（压缩等）工作

二、babel模块组织（version-7）

从v7开始，babel的所有模块都单独的定义在@babel下面，可以单独使用各个模块。
模块也采用新的命名规则，详细见Upgrade to Babel 7

1. @babel/核心模块
2. @babel/preset-{预设名字}
   可以简写@babel/{预设名字}
3. @babel/plugin-{插件名字}
   可以简写@babel/{插件名字}
4. @babel/polyfill

babel/core

babel核心模块，转换工作的依赖的模块。所有babel的工作都离不开这个模块。
大胆猜测大概的功能：

1. babel配置加载并初始化；
2. 把源码转成AST；
3. 调度管理plugins和presets操作AST；
4. 把最终的AST转成源码，并输出到目标文件。

@babel/core模块只是负责转换代码，作为dev deps。

babel/cli

通过命名行使用babel编译文件，内部依赖@babel/core。

polyfill

三、plugins

具体的转码工作由plugins完成的。

{
    "plugins": ["@babel/plugin-transform-arrow-functions"]
}

语法插件和转换插件

1. 语法插件
   只是让babel能够解析特定类型的语法（即让Babel知道怎么生成对应的AST），但不做转换操作。
2. 转换插件 = 语法插件 + 执行转换操作

plugins执行顺序

1. 先于presets执行；
2. 由前到后一次执行。
   各个plugin一般是互相独立的，都是完成具体某个的转换工作。所以由前到后依次执行。但是有些plugins(如类型属性和装饰器)可能是先后依赖的，注意他们的顺序。

自定义plugin ???

四、presets

预定义的一组plugin集合，方便书写配置。

presets执行顺序

1. 后于plugins执行；
2. 由后到前依次执行（跟plugins执行顺序相反）。
   原因：
   presets是具有语义环境的（es2015，es2016分表示ES的不同版本），一般是由依赖关系的。
   书写的顺序符合人类的思维（由老到新），但是在转换的时候考虑到向后兼容，是由后到前依次执行。

env预设

代替之前各种ES版本的presets（es-2015,es-2016）。现在统一使用env表示各种版本ES（简化了ES的配置）。

五、配置

https://babeljs.io/docs/en/configuration
https://babeljs.io/docs/en/config-files#configuration-file-types

默认配置和显示的配置

1. 默认配置
   没有配置文件，命令行不指定配置

2. 编程的方式

3. 命令行参数方式

4. .babelrc，静态的JSON文件
   在项目根目录（即package.json所在的目录）有这个文件就读取这个文件的配置，就不存在默认的配置了，必须显示的配置。

5. .babelrc.js

6. package.json

7. babel.config.js

七、 babel 能搞定一切吗？

Caveats

Issues ?

1. babel如何处理扩展名不是js文件的 ?
2. inde.jsx文件为啥没有输出？

3. Since Babel assumes that your code will run in an ES5 environment it uses ES5 functions
   如何修改到ES3环境？

好文章

1. 知乎：Babel是如何读懂JS代码的

Next... 研究

Babel DOC 使用章节。Babel是个需要认知研究的工具，

当项目使用多个npm包，如何解决babel代码重复问题？

[yaofly2012]

遍历AST

path

AST的节点不尽相同，在访问节点时可能还需要节点的位置信息，path统一了访问AST节点的规范：

1. 节点本身的数据；
2. 节点的位置信息
3. 操作节点的方法？
   遍历子节点，

[yaofly2012]

内因

Babel的执行过程？：

1. 遍历源码文件，借助plugins和presets配置的语法插件生产AST
2. 遍历plugins和presets配置的转化插件处理AST
3. 把AST转成源码输出到目标文件里。