babel的初步了解

清疚 2022-04-02 04:18 211阅读 0赞

前段时间开始研究ast，然后慢慢的顺便把babel都研究了，至于ast稍后的时间会写一篇介绍性博客专门介绍ast，本博客先介绍一下babel的基本知识点。

*  背景：

由于现在前端出现了很多非es5的语法，如jsx，.vue，ts等等的格式和写法，如果要在浏览器的设备上识别并执行，需要额外将这些非传统格式的语法转成传统的es5格式，而babel插件，就是用来将非es5格式的语法转成es5语法。

babel其实是一个解释器，它主要讲进行中的代码分为三个阶段执行：解释，转换，生成。其中babel插件或者其他插件都是在转换阶段起作用。

*  babel核心包：

babel既然是个解释器，那么就会拥有解释，遍历，以及生成的一系列工具和api：

1）babylon：babel里面用来将js代码词法分析，生成ast，他的结构有些像acron，它的返回的结构里面包含着ast和tokens。

require("babylon").parse("code", {
      // parse in strict mode and allow module declarations
      sourceType: "module",
    
      plugins: [
        // enable jsx and flow syntax
        "jsx",
        "flow"
      ]
    });

sourceType: module表示的是在严格模式下解析并且允许模块定义（即能识别import和expor语法）；script识别不了。

2）babel-traverse：功能就像estraverse一样，主要是给plugin提供遍历ast节点的功能；

3）babel-generator：将ast生成js代码；

*  babel工具包：

要完成复杂的转换工作，单靠核心包是不能完成的，所以必要还要依赖于其他工具包辅助。

1）babel-types：包含着ast中的所有类型，可以生成一个ast的节点，然后替换真是ast的节点，从而改变ast的内容（ast工具库，类似于lodash，具有校验，创建和转换ast的方法）。

import * as t from "babel-types";
    
    console.log(t.stringLiteral("my-module"));
    
    语法：t.anyTypeAnnotation(内容) // 最终返回一个类型的对象

2）babel-template：可以通过字符串的形式生成一个ast；

import template from "babel-template";
    const buildRequire = template(`
      var IMPORT_NAME = require(SOURCE);
    `);
    
    const ast2 = buildRequire({
        IMPORT_NAME: t.identifier("myModule"),
        SOURCE: t.stringLiteral("my-module")
    });
    
    console.log('ast2', ast2);

3）babel-helps: 主要是用来协助babel转换；

4）babel-core-frame: 主要是用来将错误信息打印出来;

5）babel-cli：babel的命令行工具，通过命令行对js代码进行转译;

6）babel-register: 因为babel工具文件，插件里面使用了很多require，而 该文件可以将node中的require于babel中的require绑定，从而可以使用require引入文件；

7）babel-plugin-xxx: 在转换过程中使用的插件；

8）babel-plugin-transform-xxx: 在transerform过程中使用到的插件；

(.babelrc文件：该文件会在babel编译过程中，自动配置babel的参数，babel的运行环境--env，babel的设置---preset，babel的所需要用到的插件---plugins等)

9）babel-core：该核心包包含着babel的核心（babel-lon，babel-traverse,babel-generate），提供了更多更友善的api给开发者使用。

*  babel编译原理：

编译器就是讲高级的语言或者语法，编译成更进阶机器识别的语言和语法；

babel其实更像一个转译器，因为它主要是将高级的js语法转成低级的语法；

他们两者虽然有区别，但有很多相似之处（都是经历三个过程：解析，处理，生成）；

以es6转成es5为例：

ES6代码输入 ==》 babylon进行解析 ==》 得到AST ==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树 ==》 用babel-generator通过AST树生成ES5代码

*  babel-pollfill，babel-runtime,transfer-runtime的区别：

babel-pollfill是针对于应用和页面范围内，对新的对象和新的语法进行兼容，主要是通过一些辅助函数进行兼容新的语法，但如果针对外部的库使用，就会产生污染全局环境的影响，一般对项目代码使用；

babel-runtime是对于外部插件和库的语法兼容，能将新的对象和语法，通过在运行时，把对应的可识别的语法和对象匹配出来并进行转换，从而显示在运行时进行语法降级兼容，且不会产生全局污染，一般对外部的插件使用；

transfer-babel是对babel-runtime进行封装，新的语法，对象能通过该插件，换种形式引用runtime的东西；

（其实runtime，pollfill都是建立在core-js之上的）。

对于babel的插件，主要是因为生成的ast的底层中有一个accept方法，专门用来接收visitor（插件）访问者对象，然后在visitor中定义各种节点类型的操作-visite，每个visite都可以接受一个path参数（节点信息，节点和位置信息的对象，其包含很多有用的方法），在visit中处理path，从而实现转换的作用。

const result = babel.transform(code, {
        plugins: [{
            visitor
        }]
    })
    console.log(result.code)；

至于visitor后续会详细介绍。

整个babel的结构图，我大概花了一张图表示出来：

![20181225114934573][]

而babel和webpack的协同开发，我也大概花了一张图表示他们之间的关系，但里面的原理，我后续会再去研究，研究好再分享一下：

![20181225114934595][]

以上是我对babel的初步理解，如果有不正确的地方，欢迎指出。

来源：[https://segmentfault.com/a/1190000017499449][https_segmentfault.com_a_1190000017499449]

[20181225114934573]: /images/20220402/47ce6592b4c14e3fbeeb5b3a0beffcdc.png
[20181225114934595]: /images/20220402/eeb0ca01e146482e83456b53ad4d1d93.png
[https_segmentfault.com_a_1190000017499449]: https://segmentfault.com/a/1190000017499449