1. babel工作流 | 砥砺前行

写作不易，Star是最大鼓励，感觉写的不错的可以给个Star⭐，请多多指教。本博客的Github地址。

输入字符串 -> @babel/parser -> AST -> transformer[s] -> 新的AST -> @babel/generator -> 输出字符串

AST

抽象语法树（abstract syntax tree或者缩写为AST），是源代码的抽象语法结构的树状表现形式。和抽象语法树相对的是具体语法树（concrete syntaxtree），通常称作分析树（parse tree）。一般的，在源代码的编译过程中，语法分析器创建出分析树。一旦AST被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。 AST示例

常用工具包

@babel/parser：将源代码解析成AST；
@babel/generator：将AST重新编码为js代码；
@babel/core(核心包)：包括了整个babel工作流，也就是说在@babel/core里面我们会使用到@babel/parser、transformer[s]、以及@babel/generator；
@babel/code-frame：用于生成错误信息并且打印出错误原因和错误行数。（其实就是个console工具类）；
@babel/helpers：工具类，提供了一些内置的函数实现，主要用于babel插件的开发；
@babel/runtime：工具类，但是是为了babel编译时提供一些基础工具库。作用于transformer[s]阶段，当然这是一个工具库，如果要使用这个工具库，还需要引入@babel/plugin-transform-runtime，它才是transformer[s]阶段里面的主角。
@babel/template：工具类，主要用途是为parser提供模板引擎，更加快速的转化成AST；
@babel/traverse：工具类，主要用途是来遍历AST树，也就是在@babel/generator过程中生效；
@babel/types：工具类，主要用途是在创建AST的过程中判断各种语法的类型。

@babel/code-frame // 为全局错误捕获工具类

@babel/core
├── 输入字符串
├── @babel/parser
│   └── @babel/template
│       └── @babel/types
├── AST
├── transformer[s]
│   └── @babel/helpers
├── AST
├── @babel/generator
│   └── @babel/traverse

1
2
3
4
5
6
7
8
9
10
11
12
13

Plugins

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": false, // 是否启用corejs https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs
      "helpers": true, // 各种辅助函数
      "regenerator": true, // 启用generator 支持async await
      "useESModules": false
    }]
  ]
}

1
2
3
4
5
6
7
8
9
10

Presets

{
  "presets": [
    [
      "env",
      {
        "targets": { // 目标环境
          "browsers": [ // 浏览器
            "last 2 versions",
            "ie >= 10"
          ],
          "node": "current" // node
        },
        "modules": true,  // 是否转译module syntax，默认是 commonjs
        "debug": true, // 是否输出启用的plugins列表
        "spec": false, // 是否允许more spec compliant，但可能转译出的代码更慢https://babeljs.io/docs/en/babel-preset-env#spec
        "loose": false, // 是否允许生成更简单es5的代码，但可能不那么完全符合ES6语义
        "useBuiltIns": 'usage', // 怎么运用 polyfill"usage" | "entry" | false 测试了一下 usage的包最小
        "include": [], // 总是启用的 plugins
        "exclude": [],  // 强制不启用的 plugins
        "forceAllTransforms": false, // 强制使用所有的plugins，用于只能支持ES5的uglify可以正确压缩代码
        "configPath": string //browserslist的路径
        "ignoreBrowserslistConfig": boolean //是否忽略browserslist的配置
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

← babel 2. 手写babel插件→

# AST

# 常用工具包

# Plugins

# Presets

AST

常用工具包

Plugins

Presets