search

yaofly2012 / note

Personal blog
https://github.com/yaofly2012/note/issues
43 stars 5 forks source link

Babel #53

Open yaofly2012 opened 5 years ago

yaofly2012 commented 5 years ago

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 commented 5 years ago

遍历AST

path

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

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

内因

Babel的执行过程？：

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