Babel 使用手册插件教程

参考文档 Babel 插件手册

Babel的作用

Babel是一个JavaScript编译器

很多浏览器目前还不支持ES6的代码，Babel的作用就是把浏览器不资辞的代码编译成资辞的代码。

注意很重要的一点就是，Babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数, 但是对于新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Set、Promise），这些Babel是不会转译的，需要引入polyfill来解决。

API

Babel实际上是一组模块的集合。

@babel/core

Babel 的编译器，核心 API 都在这里面，比如常见的transform、parse。

npm i @babel/core -D
  • 使用
import { transform } from '@babel/core';
import * as babel from '@babel/core';
  • transform

babel.transform(code: string, options?: Object)

babel.transform(code, options, function(err, result) {
  result; // => { code, map, ast }
});
  • parse

babel.parse(code: string, options?: Object, callback: Function)

@babel/cli

cli是命令行工具, 安装了@babel/cli就能够在命令行中使用babel 命令来编译文件。

npm i @babel/core @babel/cli -D
  • 使用
babel script.js

Note: 因为没有全局安装@babel/cli, 建议用npx命令来运行，或者./node_modules/.bin/babel，关于npx命令，可以看下官方文档

@babel/node

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

  • 使用
npx babel-node script.js

babylon

Babel的解析器

首先，安装一下这个插件。

npm i babylon -S

先从解析一个代码字符串开始：

// src/index.js
import * as babylon from 'babylon';

const code = `function add(m, n) {
  return m + n;
}`;

babylon.parse(code);


npx babel-node src/index.js


Node {
   type: "File",
   start: 0,
   end: 38,
   loc: SourceLocation {...},
   program: Node {...},
   comments: [],
   tokens: [...]
}

babel-traverse

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

运行以下命令安装：

npm i babel-traverse -S


import * as babylon from 'babylon';
import traverse from 'babel-traverse';

const code = `function add(m, n) {
  return m + n;
}`;

const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (
      path.node.type === 'Identifier' &&
      path.node.name === 'm'
    ) {
      // do something
    }
  }
});

babel-types

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

npm i babel-types -S


import traverse from 'babel-traverse';
import * as t from 'babel-types';

traverse(ast, {
  enter(path) {
    if (t.isIdentifier(path.node, { name: 'm' })) {
      // do something
    }
  }
});

babel-generator

Babel 的代码生成器，它读取AST并将其转换为代码和源码映射（sourcemaps）

npm i babel-generator -S


import * as babylon from 'babylon';
import generate from 'babel-generator';

const code = `function add(m, n) {
  return m + n;
}`;

const ast = babylon.parse(code);

generate(ast, {}, code);
// {
//   code: "...",
//   map: "...",
//   rawMappings: "..."
// }

Babel是怎么工作的

image

为了理解Babel，我们从ES6最受欢迎的特性箭头函数入手。

假设要把下面这个箭头函数的Javascript代码

(foo, bar) => foo + bar;

编译成浏览器支持的代码：

'use strict';
(function (foo, bar) {
  return foo + bar;
});

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

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

解析(Parsing)

Babel拿到源代码会把代码抽象出来，变成AST(抽象语法树)，洋文是Abstract Syntax Tree。

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

箭头函数(foo, bar) => foo + bar;的AST长这样：

{
  "type": "Program",
  "start": 0,
  "end": 202,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 179,
      "end": 202,
      "expression": {
        "type": "ArrowFunctionExpression",
        "start": 179,
        "end": 202,
        "id": null,
        "expression": true,
        "generator": false,
        "params": [
          {
            "type": "Identifier",
            "start": 180,
            "end": 183,
            "name": "foo"
          },
          {
            "type": "Identifier",
            "start": 185,
            "end": 188,
            "name": "bar"
          }
        ],
        "body": {
          "type": "BinaryExpression",
          "start": 193,
          "end": 202,
          "left": {
            "type": "Identifier",
            "start": 193,
            "end": 196,
            "name": "foo"
          },
          "operator": "+",
          "right": {
            "type": "Identifier",
            "start": 199,
            "end": 202,
            "name": "bar"
          }
        }
      }
    }
  ],
  "sourceType": "module"
}

上面的AST描述了源代码的每个部分以及它们之间的关系，可以自己在这里试一下astexplorer。

AST是怎么来的？解析过程分为两个步骤：

  • 分词：将整个代码字符串分割成语法单元数组

Javascript代码中的语法单元主要指如标识符（if/else、return、function）、运算符、括号、数字、字符串、空格等等能被解析的最小单元

[
    {
        "type": "Punctuator",
        "value": "("
    },
    {
        "type": "Identifier",
        "value": "foo"
    },
    {
        "type": "Punctuator",
        "value": ","
    },
    {
        "type": "Identifier",
        "value": "bar"
    },
    {
        "type": "Punctuator",
        "value": ")"
    },
    {
        "type": "Punctuator",
        "value": "=>"
    },
    {
        "type": "Identifier",
        "value": "foo"
    },
    {
        "type": "Punctuator",
        "value": "+"
    },
    {
        "type": "Identifier",
        "value": "bar"
    }
]
  • 语法分析：建立分析语法单元之间的关系

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

简单来说语义分析既是对语句和表达式识别，这是个递归过程，在解析中，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-2， react， 最后es2015。

生成(Code Generation)

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

编写一个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个参数：path和state

export default function({ types: t }) {
  return {
    visitor: {
      CallExpression(path, state) {}
    }
  };
};

写一个简单的插件

我们写一个简单的插件，把所有定义变量名为a的换成b, 先从astexplorer看下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里的type和source不同。

// 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的 API，和babel编译代码的过程以及简单编写了一个babel插件

原文地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350