首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Babel 的工作原理以及怎么写一个 Babel 插件

Babel 的工作原理以及怎么写一个 Babel 插件

作者头像
前端迷
发布2019-10-13 14:24:26
2.2K0
发布2019-10-13 14:24:26
举报
文章被收录于专栏:前端迷前端迷

在前端圈子里,对于 Babel,大家肯定都比较熟悉了。如果哪天少了它,对于前端工程师来说肯定是个噩梦。Babel 的工作原理是怎样的可能了解的人就不太多了。

本文将主要介绍 Babel 的工作原理以及怎么写一个 Babel 插件。

Babel 是怎么工作的

Babel 是一个 JavaScript 编译器。

做与不做

注意很重要的一点就是,Babel 只是转译新标准引入的语法,比如:

  • 箭头函数
  • let / const
  • 解构

哪些在 Babel 范围外?对于新标准引入的全局变量、部分原生对象新增的原型链上的方法,Babel 表示超纲了。

  • 全局变量
  • Promise
  • Symbol
  • WeakMap
  • Set
  • includes
  • generator 函数

对于上面的这些 API,Babel 是不会转译的,需要引入 polyfill 来解决。

Babel 编译的三个阶段

Babel 的编译过程和大多数其他语言的编译器相似,可以分为三个阶段:

  • 解析(Parsing):将代码字符串解析成抽象语法树。
  • 转换(Transformation):对抽象语法树进行转换操作。
  • 生成(Code Generation): 根据变换后的抽象语法树再生成代码字符串。

为了理解 Babel,我们从最简单一句 console 命令下手

解析(Parsing)

Babel 拿到源代码会把代码抽象出来,变成 AST (抽象语法树),学过编译原理的同学应该都听过这个词,全称是 Abstract Syntax Tree

抽象语法树是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,只所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现,它们主要用于源代码的简单转换。

console.log('zcy'); 的 AST 长这样:

{
  "type": "Program",
  "body": [
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "computed": false,
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          }
        },
        "arguments": [
          {
          "type": "Literal",
          "value": "zcy",
          "raw": "'zcy'"
          }
        ]
      }
    }
  ],
  "sourceType": "script"
}

上面的 AST 描述了源代码的每个部分以及它们之间的关系。

AST 是怎么来的?

整个解析过程分为两个步骤:

  • 分词:将整个代码字符串分割成语法单元数组
  • 语法分析:建立分析语法单元之间的关系

分词

语法单元通俗点说就是代码中的最小单元,不能再被分割,就像原子是化学变化中的最小粒子一样。

Javascript 代码中的语法单元主要包括以下这么几种:

  • 关键字:constletvar
  • 标识符:可能是一个变量,也可能是 if、else 这些关键字,又或者是 true、false 这些常量
  • 运算符
  • 数字
  • 空格
  • 注释:对于计算机来说,知道是这段代码是注释就行了,不关心其具体内容

其实分词说白了就是简单粗暴地对字符串一个个遍历。为了模拟分词的过程,写了一个简单的 Demo,仅仅适用于和上面一样的简单代码。Babel 的实现比这要复杂得多,但是思路大体上是相同的。对于一些好奇心比较强的同学,可以看下具体是怎么实现的,链接在文章底部。

function tokenizer(input) {
  const tokens = [];
  const punctuators = [',', '.', '(', ')', '=', ';'];

  let current = 0;
  while (current < input.length) {

    let char = input[current];

    if (punctuators.indexOf(char) !== -1) {

      tokens.push({
        type: 'Punctuator',
        value: char,
      });
      current++;
      continue;
    }
    // 检查空格,连续的空格放到一起
    let WHITESPACE = /\s/;
    if (WHITESPACE.test(char)) {
      current++;
      continue;
    }

    // 标识符是字母、$、_开始的
    if (/[a-zA-Z\$\_]/.test(char)) {
      let value = '';

      while(/[a-zA-Z0-9\$\_]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'Identifier', value });
      continue;
    }

    // 数字从0-9开始,不止一位
    const NUMBERS = /[0-9]/;
    if (NUMBERS.test(char)) {
      let value = '';
      while (NUMBERS.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'Numeric', value });
      continue;
    }

    // 处理字符串
    if (char === '"') {
      let value = '';
      char = input[++current];

      while (char !== '"') {
        value += char;
        char = input[++current];
      }

      char = input[++current];

      tokens.push({ type: 'String', value });

      continue;
    }
    // 最后遇到不认识到字符就抛个异常出来
    throw new TypeError('Unexpected charactor: ' + char);
  }

  return tokens;
}

const input = `console.log("zcy");`

console.log(tokenizer(input));

结果如下:

[ 
  { 
    "type" :  "Identifier" , 
    "value" :  "console"
   }, 
  { 
    "type" :  "Punctuator" , 
    "value" :  "."
   }, 
  { 
    "type" :  "Identifier" , 
    "value" :  "log"
   }, 
  { 
    "type" :  "Punctuator" , 
    "value" :  "("
   }, 
  { 
    "type" :  "String" ,
    "value" :  "'zcy'"
   }, 
  { 
    "type" : "Punctuator" , 
    "value" :  ")"
   }, 
  { 
    "type" :  "Punctuator" , 
    "value" :  ";"
   } 
]

语法分析

语义分析则是将得到的词汇进行一个立体的组合,确定词语之间的关系。考虑到编程语言的各种从属关系的复杂性,语义分析的过程又是在遍历得到的语法单元组,相对而言就会变得更复杂。

简单来说语法分析是对语句和表达式识别,这是个递归过程,在解析中,Babel 会在解析每个语句和表达式的过程中设置一个暂存器,用来暂存当前读取到的语法单元,如果解析失败,就会返回之前的暂存点,再按照另一种方式进行解析,如果解析成功,则将暂存点销毁,不断重复以上操作,直到最后生成对应的语法树。

转换(Transformation)
Plugins

插件应用于 babel 的转译过程,尤其是第二个阶段 Transformation,如果这个阶段不使用任何插件,那么 babel 会原样输出代码。

Presets

Babel 官方帮我们做了一些预设的插件集,称之为 Preset,这样我们只需要使用对应的 Preset 就可以了。每年每个 Preset 只编译当年批准的内容。而 babel-preset-env 相当于 ES2015 ,ES2016 ,ES2017 及最新版本。

Plugin/Preset 路径

如果 Plugin 是通过 npm 安装,可以传入 Plugin 名字给 Babel,Babel 将检查它是否安装在 node_modules 中。

"plugins": ["babel-plugin-myPlugin"]

也可以指定你的 Plugin/Preset 的相对或绝对路径。

"plugins": ["./node_modules/asdf/plugin"]
Plugin/Preset 排序

如果两次转译都访问相同的节点,则转译将按照 Plugin 或 Preset 的规则进行排序然后执行。

  • Plugin 会运行在 Preset 之前。
  • Plugin 会从第一个开始顺序执行。
  • Preset 的顺序则刚好相反(从最后一个逆序执行)。

例如:

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

将先执行 transform-decorators-legacy 再执行 transform-class-properties

但 preset 是反向的

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}

会按以下顺序运行: stage-2react, 最后 es2015

那么问题来了,如果 presetsplugins 同时存在,那执行顺序又是怎样的呢?答案是先执行 plugins 的配置,再执行 presets 的配置。

所以以下代码的执行顺序为

  1. @babel/plugin-proposal-decorators
  2. @babel/plugin-proposal-class-properties
  3. @babel/plugin-transform-runtime
  4. @babel/preset-env
// .babelrc 文件
{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-transform-runtime",
  ]
}
生成(Code Generation)

babel-generator 通过 AST 树生成 ES5 代码。

如何编写一个 Babel 插件

基础的东西讲了些,下面说下具体如何写插件,只做简单的介绍,感兴趣的同学可以看 Babel 官方的介绍。

插件格式

先从一个接收了当前 Babel 对象作为参数的 Function 开始。

export default function(babel) {
  // plugin contents
}

我们经常会这样写

export default function({ types: t }) {
    //
}

接着返回一个对象,其 visitor 属性是这个插件的主要访问者。

export default function({ types: t }) {
  return {
    visitor: {
      // visitor contents
    }
  };
};

visitor 中的每个函数接收 2 个参数:pathstate

export default function({ types: t }) {
  return {
    visitor: {
      CallExpression(path, state) {}
    }
  };
};
写一个简单的插件

我们先写一个简单的插件,把所有定义变量名为 a 的换成 b ,先看下 var a = 1的 AST

{
  "type": "Program",
  "start": 0,
  "end": 10,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 9,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 9,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 8,
            "end": 9,
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}

从这里看,要找的节点类型就是 VariableDeclarator ,下面开始撸代码

export default function({ types: t }) {
  return {
    visitor: {
      VariableDeclarator(path, state) {
        if (path.node.id.name == 'a') {
          path.node.id = t.identifier('b')
        }
      }
    }
  }
}

我们要把 id 属性是 a 的替换成 b 就好了。但是这里不能直接 path.node.id.name = 'b' 。如果操作的是Object,就没问题,但是这里是 AST 语法树,所以想改变某个值,就是用对应的 AST 来替换,现在我们用新的标识符来替换这个属性。

最后测试一下

import * as babel from '@babel/core';
const c = `var a = 1`;

const { code } = babel.transform(c, {
  plugins: [
    function({ types: t }) {
      return {
        visitor: {
          VariableDeclarator(path, state) {
            if (path.node.id.name == 'a') {
              path.node.id = t.identifier('b')
            }
          }
        }
      }
    }
  ]
})

console.log(code); // var b = 1
实现一个简单的按需打包功能

例如我们要实现把 import { Button } from 'antd' 转成 import Button from 'antd/lib/button'

通过对比 AST 发现,specifiers 里的 typesource 不同。

// import { Button } from 'antd'
"specifiers": [
    {
        "type": "ImportSpecifier",
        ...
    }
]
// import Button from 'antd/lib/button'
"specifiers": [
    {
        "type": "ImportDefaultSpecifier",
        ...
    }
]
import * as babel from '@babel/core';
const c = `import { Button } from 'antd'`;

const { code } = babel.transform(c, {
  plugins: [
    function({ types: t }) {
      return {
        visitor: {
          ImportDeclaration(path) {
            const { node: { specifiers, source } } = path;
            if (!t.isImportDefaultSpecifier(specifiers[0])) { // 对 specifiers 进行判断,是否默认倒入
              const newImport = specifiers.map(specifier => (
                t.importDeclaration(
                  [t.ImportDefaultSpecifier(specifier.local)],
                  t.stringLiteral(`${source.value}/lib/${specifier.local.name}`)
                )
              ))
              path.replaceWithMultiple(newImport)
            }
          }
        }
      }
    }
  ]
})

console.log(code); // import Button from "antd/lib/Button";

当然 babel-plugin-import 这个插件是有配置项的,我们可以对代码做以下更改。

export default function({ types: t }) {
  return {
    visitor: {
      ImportDeclaration(path, { opts }) {
        const { node: { specifiers, source } } = path;
        if (source.value === opts.libraryName) {
          // ...
        }
      }
    }
  }
}

至此,这个插件我们就编写完成了。

Babel 常用 API

@babel/core

Babel 的编译器,核心 API 都在这里面,比如常见的 transformparse

@babel/cli

cli 是命令行工具, 安装了 @babel/cli 就能够在命令行中使用 babel 命令来编译文件。当然我们一般不会用到,打包工具已经帮我们做好了。

@babel/node

直接在 node 环境中,运行 ES6 的代码。

babylon

Babel 的解析器。

babel-traverse

用于对 AST 的遍历,维护了整棵树的状态,并且负责替换、移除和添加节点。

babel-types

用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法,对编写处理 AST 逻辑非常有用。

babel-generator

Babel 的代码生成器,它读取 AST 并将其转换为代码和源码映射(sourcemaps)。

总结

文章主要介绍 Babel 编译代码的过程和原理以及简单编写了一个 babel 插件,欢迎大家对内容进行指正和讨论。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端迷 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Babel 是怎么工作的
    • 做与不做
    • Babel 编译的三个阶段
      • 解析(Parsing)
        • AST 是怎么来的?
      • 转换(Transformation)
        • Plugins
        • Presets
        • Plugin/Preset 路径
        • Plugin/Preset 排序
        • 生成(Code Generation)
    • 如何编写一个 Babel 插件
      • 插件格式
        • 写一个简单的插件
          • 实现一个简单的按需打包功能
          • Babel 常用 API
            • @babel/core
              • @babel/cli
                • @babel/node
                  • babylon
                    • babel-traverse
                      • babel-types
                        • babel-generator
                        • 总结
                        相关产品与服务
                        命令行工具
                        腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档