• introduce
• basis
  • Abstract syntax tree (ASTs)
  • Processing steps for Babel
  • parsing
    • Lexical analysis
    • Syntax analysis
  • conversion
  • generate
  • traverse
  • Visitors
  • Paths
    • Paths in Visitors
  • State of affairs
  • Scopes (Scopes)
    • Bindings (Bindings)
• API
  • babylon
  • babel-traverse
  • babel-types
  • (Definitions)
  • Builders
  • Validators
  • Converters
  • babel-generator
  • babel-template
• Write your first Babel plug-in
• Conversion operations
  • access
  • Gets the Path of the child node
  • Check the Node type
  • Check the Path type
  • Check whether identifiers are referenced
  • Find the specific parent path
  • Get peer path
  • Stop traversal
  • To deal with
  • Replace a node
  • Replace a single node with multiple nodes
  • Replace nodes with string source code
  • Insert sibling node
  • Insert into a container
  • Remove nodes
  • Replace parent node
  • Deleting a parent node
  • Scope (Scope)
  • Check whether local variables are bound
  • Generate the UID
  • Promote variable declarations to the parent scope
  • Renames the binding and its references
• Plug-in options
  • Preparation and finishing of the plug-in
  • Enable additional syntax in the plug-in
• Building a node
• Best practices
  • Avoid traversing abstract syntax trees (AST)
  • Merge visitor objects in a timely manner
  • If you can find it manually, don’t traverse it
  • Optimize nested visitor objects
  • Watch out for nested structures
  • Unit testing

Each step in this process involves creating or manipulating an abstract syntax tree, also known as an AST.

Babel using a ESTree based and modified the AST, its kernel documentation can be in [here] (https://github. com/Babel/Babel/blob/master/doc/AST/spec. Md) found. .

function square(n) { return n * n; } Duplicate codeCopy the code

The AST Explorer gives you a better sense of the AST nodes. Here is a link to an example of the code above.

The program can be represented as a tree like this:

- FunctionDeclaration: - id: - Identifier: - name: square - params [1] - Identifier - name: n - body: - BlockStatement - body [1] - ReturnStatement - argument - BinaryExpression - operator: * - left - Identifier - name: N-right-identifier - name: n Copy codeCopy the code

Or a JavaScript Object like this:

{ type: "FunctionDeclaration ", id: { type: "Identifier ", name: "square " }, params: [{ type: "Identifier ", name: "n " }], body: { type: "BlockStatement ", body: [{ type: "ReturnStatement ", argument: { type: "BinaryExpression ", operator: "* ", left: { type: "Identifier ", name: "n " }, right: { type: "Identifier ", name: "N"}}}]}} copy codeCopy the code

You’ll notice that each layer of the AST has the same structure:

{ type: "FunctionDeclaration ", id: {... }, params: [...] , body: {... }} Copy the codeCopy the code

{ type: "Identifier ", name: ... } Duplicate codeCopy the code

{ type: "BinaryExpression ", operator: ... , left: {... }, right: {... }} Copy the codeCopy the code

Note: Some attributes have been removed for simplification purposes

Each of these layers is also called a Node. An AST can consist of a single node or hundreds or thousands of nodes. Together, they describe program syntax for static analysis.

Each node has the following Interface:

interface Node { type: string; } Duplicate codeCopy the code

The type field is a string representing the type of the node (for example, “FunctionDeclaration “, “Identifier “, or “BinaryExpression “). Each type of node defines additional attributes that further describe the node type.

Babel also generates additional attributes for each node that describe its position in the original code.

{ type: ... , start: 0, end: 38, loc: { start: { line: 1, column: 0 }, end: { line: 3, column: 1 } }, ... } Duplicate codeCopy the code

Each node has attributes like start, end, and LOC.

The parsing step receives the code and outputs the AST. This step is broken down into two stages: Lexical Analysis ** and Syntactic Analysis. .

The parsing phase converts a token flow into the AST form. This phase uses the information in the tokens to transform them into an AST representation structure that makes subsequent operations easier.

The code generation step converts the final AST (after a series of transformations) into string code and creates source maps. .

Code generation is simple: Depth-first traverses the AST and builds a string that represents the transformed code.

When we talk about “entering” a node, we really mean that we are accessing them, and we use the term because of the concept of visitor patterns. .

Visitor is a cross-language pattern for AST traversal. They are simply an object that defines a method for obtaining a specific node in a tree structure. That’s a little abstract so let’s look at an example.

const MyVisitor = { Identifier() { console.log("Called! "); }}; // You can also create a visitor object and add methods to it later. let visitor = {}; visitor.MemberExpression = function() {}; The visitor. FunctionDeclaration = function () {} copy codeCopy the code

Note: Identifier() {… } is Identifier: {enter() {… }}. .

This is a simple visitor that, when used for traversal, calls the Identifier() method whenever an Identifier is encountered in the tree.

So the Identifier() method is called four times in the code below (there are four identifiers, including Square). .

function square(n) { return n * n; } Duplicate codeCopy the code

path.traverse(MyVisitor); Called! Called! Called! Called! Copy the codeCopy the code

These calls all occur on entry to the node, although we can sometimes call the visitor method on exit. .

Suppose we have a tree structure:

- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) -identifier (left) -identifier (right) Copies codeCopy the code

As we go down each branch of the tree we eventually get to the end, so we need to go up to get to the next node. As we walk down the tree we enter each node, and as we walk up we exit each node.

Let’s walk through this process using the tree above as an example.

• Enter theFunctionDeclaration
  • Enter theIdentifier (id)
  • Come to an end
  • exitIdentifier (id)
  • Enter theIdentifier (params[0])
  • Come to an end
  • exitIdentifier (params[0])
  • Enter theBlockStatement (body)
  • Enter theReturnStatement (body)
    • Enter theBinaryExpression (argument)
    • Enter theIdentifier (left)
      • Come to an end
    • exitIdentifier (left)
    • Enter theIdentifier (right)
      • Come to an end
    • exitIdentifier (right)
    • exitBinaryExpression (argument)
  • exitReturnStatement (body)
  • exitBlockStatement (body)
• exitFunctionDeclaration

So you actually have two chances to visit a node when creating visitors.

const MyVisitor = { Identifier: { enter() { console.log("Entered! "); }, exit() { console.log("Exited! "); }}}; Copy the codeCopy the code

If necessary, you can use the method name | divided into Idenfifier | MemberExpression form of string, use the same function in a variety of access nodes. .

An example in the flow-Comments plug-in is as follows:

const MyVisitor = { "ExportNamedDeclaration|Flow "(path) {} }; Copy the codeCopy the code

You can also use aliases (as defined by babel-types) in visitors.

For example,

Function is an alias for FunctionDeclaration, FunctionExpression, ArrowFunctionExpression, ObjectMethod and ClassMethod.

const MyVisitor = { Function(path) {} }; Copy the codeCopy the code

When you have a visitor to the Identifier() member method, you are actually accessing the path rather than the node. In this way, you are dealing with the responsive representation of the node rather than the node itself.

const MyVisitor = { Identifier(path) { console.log("Visiting: " + path.node.name); }}; Copy the codeCopy the code

a + b + c; Copy the codeCopy the code

path.traverse(MyVisitor); Visiting: A Visiting: B Visiting: cCopy the code

Next, let’s introduce the concept of scope. JavaScript supports lexical scope, where blocks of code create new scopes in a tree nested structure.

// scope 1 function scopeTwo() {// scope 2}Copy the code

In JavaScript, whenever you create a reference, whether through variables, functions, types, params, module imports, labels, etc., it belongs to the current scope.

var global = "I am in the global scope "; function scopeOne() { var one = "I am in the scope created by `scopeOne()` "; function scopeTwo() { var two = "I am in the scope created by `scopeTwo()` "; }} Copy the codeCopy the code

Deeper inner scope code can use references from outer scopes.

function scopeOne() { var one = "I am in the scope created by `scopeOne()` "; function scopeTwo() { one = "I am updating the reference in `scopeOne` inside `scopeTwo` "; }} Copy the codeCopy the code

An inner scope can also create a reference with the same name as an outer scope.

function scopeOne() { var one = "I am in the scope created by `scopeOne()` "; function scopeTwo() { var one = "I am creating a new `one` but leaving reference in `scopeOne()` alone. "; }} Copy the codeCopy the code

When writing a transformation, you must be careful about scoping. We need to make sure that changing parts of the code doesn’t break existing code.

When we add a new reference, we need to make sure that the name of the newly added reference does not conflict with all existing references. Or we just want to find all references that use a variable, we just want to find those references within a given Scope.

The scope can be expressed as follows:

{ path: path, block: path.node, parentBlock: path.parent, parent: parentScope, bindings: [...] } Duplicate codeCopy the code

When you create a new scope, you need to give its path and parent scope, and then it collects all references (” bindings “) in that scope during traversal.

Once the references are collected, you can use various methods on Scopes, which we’ll learn about later.

Babel is actually a collection of modules. In this section we explore some of the major modules, explaining what they do and how to use them.

Note: This section is not a substitute for the detailed API documentation, which will be available shortly.

Babylon is the parser for Babel. Originally came out of Acorn project Fork. Acorn was fast, easy to use, and designed a plug-in based architecture for non-standard features (and those that will be standard features in the future).

First, let’s install it.

$NPM install --save Babylon copies the codeCopy the code

Start by parsing a code string:

import * as babylon from "babylon "; const code = `function square(n) { return n * n; } `; babylon.parse(code); // Node { // type: "File ", // start: 0, // end: 38, // loc: SourceLocation {... }, // program: Node {... }, // comments: [], // tokens: [...] //} copy codeCopy the code

We can also pass options to the parse() method as follows:

babylon.parse(code, { sourceType: "module ", // default: "script " plugins: ["jsx "] // default: [] }); Copy the codeCopy the code

SourceType can be “module “or “script”, which indicates which mode Babylon should be parsed in. “Module” will parse in strict mode and allow module definition, “script “will not.

Note: sourceType defaults to “script “and generates an error when import or export is found. ScourceType: “module “is used to avoid these errors.

Because Babylon uses a plug-in based architecture, there is a plugins option to switch on and off the built-in plug-ins. Note that Babylon has not yet made this API available to external plug-ins, and it is not ruled out that it will be available in the future.

For a complete list of plug-ins, see the Babylon README file. .

The Babel Traverse module maintains the state of the entire tree and is responsible for replacing, removing, and adding nodes.

Run the following command to install:

$NPM install --save babel-traverse copy codeCopy the code

We can use Babylon with us to iterate over and update nodes:

import * as babylon from "babylon "; import traverse from "babel-traverse "; const code = `function square(n) { return n * n; } `; const ast = babylon.parse(code); traverse(ast, { enter(path) { if ( path.node.type === "Identifier " && path.node.name === "n " ) { path.node.name = "x "; }}}); Copy the codeCopy the code

The Babel Types module is a Lodash library for AST nodes that contains methods for constructing, validating, and transforming AST nodes. This tool library contains thoughtful tool methods that are useful for writing logic that processes AST.

To install it, run the following command:

$NPM install --save babel-typesCopy the code

Then use it as follows:

import traverse from "babel-traverse "; import * as t from "babel-types "; traverse(ast, { enter(path) { if (t.isIdentifier(path.node, { name: "n " })) { path.node.name = "x "; }}}); Copy the codeCopy the code

You’ll notice that the BinaryExpression definition above has a Builder field. .

Builder: ["operator ", "left ", "right "] Copy codeCopy the code

This is because each node type has a constructor method builder, which is used like this:

t.binaryExpression("* ", t.identifier("a "), t.identifier("b ")); Copy the codeCopy the code

You can create an AST like this:

{ type: "BinaryExpression ", operator: "* ", left: { type: "Identifier ", name: "a " }, right: { type: "Identifier ", name: "b "}} Duplicate codeCopy the code

When printed it looks like this:

A * B copies the codeCopy the code

The constructor also validates the nodes it creates and throws a descriptive error in case of misuse, which leads to the next method type.

[WIP]

The Babel Generator module is a code Generator for Babel that reads the AST and translates it into code and sourcemaps (sourcemaps).

Run the following command to install it:

$NPM install --save babel-generator copy codeCopy the code

Then use it as follows:

import * as babylon from "babylon "; import generate from "babel-generator "; const code = `function square(n) { return n * n; } `; const ast = babylon.parse(code); generate(ast, {}, code); // { // code: "... ", // map: "... "//} copy the codeCopy the code

You can also pass options to the generate() method. .

generate(ast, { retainLines: false, compact: "auto ", concise: false, quotes: "double ", // ... }, code); Copy the codeCopy the code

Babel-template is another module that is small but very useful. It lets you write string code with placeholders instead of manual encoding, especially when generating large AST. In computer science, this ability is called quasiquotes.

$NPM install --save babel-templateCopy the code

import template from "babel-template "; import generate from "babel-generator "; import * as t from "babel-types "; const buildRequire = template(` var IMPORT_NAME = require(SOURCE); `); const ast = buildRequire({ IMPORT_NAME: t.identifier("myModule "), SOURCE: t.stringLiteral("my-module ") }); console.log(generate(ast).code); Copy the codeCopy the code

var myModule = require("my-module "); Copy the codeCopy the code

To get the property values of an AST node, we typically access the node and use the path.node.property method.

// the BinaryExpression AST node has properties: `left`, `right`, `operator` BinaryExpression(path) { path.node.left; path.node.right; path.node.operator; } Duplicate codeCopy the code

If you want to access the path inside the property, use the get method of the path object, passing the property as a string.

BinaryExpression(path) { path.get('left'); } Program(path) { path.get('body.0'); } Duplicate codeCopy the code

A path has the same method to check the type of node:

BinaryExpression(path) { if (path.get('left').isIdentifier({ name: "n " })) { // ... }} Copy the codeCopy the code

Equivalent to:

BinaryExpression(path) { if (t.isIdentifier(path.node.left, { name: "n " })) { // ... }} Copy the codeCopy the code

Sometimes you need to traverse a path up the syntax tree until a condition is met.

For each parent path, callback is called with its NodePath as an argument, and when callback returns true, its NodePath is returned. .

path.findParent((path) => path.isObjectExpression()); Copy the codeCopy the code

If you also need to traverse the current node:

path.find((path) => path.isObjectExpression()); Copy the codeCopy the code

Find the nearest parent function or program:

path.getFunctionParent(); Copy the codeCopy the code

Walk up the syntax tree until you find the parent path in the list

path.getStatementParent(); Copy the codeCopy the code

If your plugin needs to stop running in some way, the easiest thing to do is to write it back as soon as possible.

BinaryExpression(path) { if (path.node.operator ! == '**') return; } Duplicate codeCopy the code

If you are subtraversing a top-level path, you can use two provided API methods:

path.skip() skips traversing the children of the current path. path.stop() stops traversal entirely.

outerPath.traverse({ Function(innerPath) { innerPath.skip(); // if checking the children is irrelevant }, ReferencedIdentifier(innerPath, state) { state.iife = true; innerPath.stop(); // if you want to save some state and then stop traversal, or deopt } }); Copy the codeCopy the code

BinaryExpression(path) { path.replaceWith( t.binaryExpression("** ", path.node.left, t.numberLiteral(2)) ); } Duplicate codeCopy the code

function square(n) { - return n * n; + return n ** 2; } Duplicate codeCopy the code

Copy the codeCopy the code

FunctionDeclaration(path) { path.replaceWithSourceString(function add(a, b) { return a + b; }); }

```diff - function square(n) { - return n * n; + function add(a, b) { + return a + b; } Duplicate codeCopy the code

** Note: </> This API is not recommended unless you are dealing with dynamic source strings, otherwise it is more efficient to parse the code outside the visitor.

If you want to insert an array like body
in the AST node property. It is similar to insertBefore/insertAfter, but you must specify the listKey (usually the body).

Copy the codeCopy the code

ClassMethod(path) { path.get(‘body’).unshiftContainer(‘body’, t.expressionStatement(t.stringLiteral(‘before’))); path.get(‘body’).pushContainer(‘body’, t.expressionStatement(t.stringLiteral(‘after’))); }

```diff class A { constructor() { + "before " var a = 'middle'; + "after "}} Copy the codeCopy the code

Simply call replaceWith using parentPath: ‘path.parentPath

BinaryExpression(path) { path.parentPath.replaceWith( t.expressionStatement(t.stringLiteral("Anyway the wind blows, doesn 't really matter to me, to me.")) ); } 'copy the codeCopy the code

function square(n) { - return n * n; + "Anyway the wind blows, doesn't really matter to me, to me. "; } Duplicate codeCopy the code

This will generate an identifier that will not conflict with any locally defined variables.

FunctionDeclaration(path) { path.scope.generateUidIdentifier("uid "); // Node { type: "Identifier ", name: "_uid " } path.scope.generateUidIdentifier("uid "); // Node {type: "Identifier ", name: "_uid2 "}} Copy codeCopy the code

FunctionDeclaration(path) { path.scope.rename("n ", "x "); } Duplicate codeCopy the code

- function square(n) { - return n * n; + function square(x) { + return x * x; } Duplicate codeCopy the code

Alternatively, you can rename the binding to the generated unique identifier:

FunctionDeclaration(path) { path.scope.rename("n "); } Duplicate codeCopy the code

- function square(n) { - return n * n; + function square(_n) { + return _n * _n; } Duplicate codeCopy the code

A plug-in can have functions that run before or after the plug-in. They can be used for setup or cleaning/analysis purposes.

export default function({ types: t }) { return { pre(state) { this.cache = new Map(); }, visitor: { StringLiteral(path) { this.cache.set(path.node.value, 1); } }, post(state) { console.log(this.cache); }}; } Duplicate codeCopy the code

If you want to throw an error with babel-code-frame and a message:

export default function({ types: t }) { return { visitor: { StringLiteral(path) { throw path.buildCodeFrameError("Error message here "); }}}; } Duplicate codeCopy the code

The error looks like:

file.js: Error message here 7 | 8 | let tips = [ > 9 | "Click on any AST node with a '+' to expand it ", | | | ^ 10 11 "Hovering over a node highlights the 12 \ | corresponding part in the source code", copy the code
                                            
                                            
                                            
                                            Copy the code

The constructor method name is the name of the node type you want, except for the first lowercase letter. For example, if you want to create a MemberExpression you can use t.ember Expression (…). .

The parameters of these builders are determined by the node definitions. There is some work being done to generate easy-to-read file definitions, but now they can all be found here. .

The node definition is as follows:

defineType("MemberExpression", { builder: ["object", "property", "computed"], visitor: ["object", "property"], aliases: ["Expression", "LVal"], fields: { object: { validate: assertNodeType("Expression") }, property: { validate(node, key, val) { let expectedType = node.computed ? "Expression" : "Identifier"; assertNodeType(expectedType)(node, key, val); } }, computed: { default: false } } }); 'Copy codeCopy the code

Here you can see all the information about this particular node type, including how to build it, walk through it, and verify it.

By looking at the generator properties, you can see the three parameters required to call the generator method (T. Conditions).

Generator: ["object", "property", "computed"], copy codeCopy the code

Note that sometimes there are more properties that can be customized on a node than the constructor array contains. This is to prevent the generator from having too many parameters. In these cases, you need to set the properties manually. An example is ClassMethod .

// Example // because the builder doesn't contain `async` as a property var node = t.classMethod( "constructor", t.identifier("constructor"), params, body ) // set it manually after creation node.async = true; Copy the codeCopy the code

You can see the validation for the builder arguments with the fields object.

Copy the codeCopy the code

fields: { object: { validate: assertNodeType("Expression") }, property: { validate(node, key, val) { let expectedType = node.computed ? "Expression" : "Identifier"; assertNodeType(expectedType)(node, key, val); } }, computed: { default: false } }

You can see that `object` needs to be an `Expression`, `property` either needs to be an `Expression` or an `Identifier` depending on if the member expression is `computed` or not and `computed` is simply a boolean that defaults to `false`. So we can construct a `MemberExpression` by doing the following: ```js t.memberExpression( t.identifier('object'), t.identifier('property') // `computed` is optional ); Copy the codeCopy the code

Which will result in:

Object. Property Copies the codeCopy the code

However, we said that object needed to be an Expression so why is Identifier valid?

Well if we look at the definition of Identifier we can see that it has an aliases property which states that it is also an expression.

Aliases: ["Expression", "LVal"], copy codeCopy the code

So since MemberExpression is a type of Expression, we could set it as the object of another MemberExpression:

t.memberExpression( t.memberExpression( t.identifier('member'), t.identifier('expression') ), T. identifier(' Property ')) copies the codeCopy the code

Which will result in:

Member. The expression. The property duplicate codeCopy the code

It's very unlikely that you will ever memorize the builder method signatures for every node type. So you should take some time and understand how they are generated from the node definitions.

You can find all of the actual definitions here and you can see them documented here

It's pretty simple to extract certain checks (if a node is a certain type) into their own helper functions as well as extracting out helpers for specific node types.

function isAssignment(node) { return node && node.operator === opts.operator + "="; } function buildAssignment(left, right) { return t.assignmentExpression("=", left, right); } Duplicate codeCopy the code

When writing visitors, it may be tempting to call path.traverse in multiple places where they are logically necessary.

path.traverse({ Identifier(path) { // ... }}); path.traverse({ BinaryExpression(path) { // ... }}); Copy the codeCopy the code

However, it is far better to write these as a single visitor that only gets run once. Otherwise you are traversing the same tree multiple times for no reason.

path.traverse({ Identifier(path) { // ... }, BinaryExpression(path) { // ... }}); Copy the codeCopy the code

When you nest visitors, it might make sense to nest them in your code.

const MyVisitor = { FunctionDeclaration(path) { path.traverse({ Identifier(path) { // ... }}); }}; Copy the codeCopy the code

However, a new visitor object is created each time ‘FunctionDeclaration() is called. That can be costly, because Babel does some processing each time a new visitor object is passed in (such as exploding keys containing multiple types, performing validation, and adjusting the object structure). Because Babel stores flags on visitor objects indicating that it’s already performed that processing, it’s better to store the visitor in a variable and pass the same object each time.

const nestedVisitor = { Identifier(path) { // ... }}; const MyVisitor = { FunctionDeclaration(path) { path.traverse(nestedVisitor); }}; 'Copy codeCopy the code

If you need some state in nested visitors, like this:

const MyVisitor = { FunctionDeclaration(path) { var exampleState = path.node.params[0].name; path.traverse({ Identifier(path) { if (path.node.name === exampleState) { // ... }}}); }}; Copy the codeCopy the code

You can pass it as a status to the traverse()
method and have access to this in the visitor.

const nestedVisitor = { Identifier(path) { if (path.node.name === this.exampleState) { // ... }}}; const MyVisitor = { FunctionDeclaration(path) { var exampleState = path.node.params[0].name; path.traverse(nestedVisitor, { exampleState }); }}; Copy the codeCopy the code

There are several main ways to test the Babel plug-in: snapshot tests, AST tests, and execution tests. For this example, we will use Jest because it supports out-of-box snapshot testing. The example we create here is hosted on this repo.

First we need a Babel plug-in, which we’ll put in SRC/index.js.

<br />module.exports = function testPlugin(babel) { return { visitor: { Identifier(path) { if (path.node.name === 'foo') { path.node.name = 'bar'; }}}}; }; Copy the codeCopy the code

Next, install our dependencies with ‘ ‘NPM install –save-dev babel-core jest , so we can start writing our first test: snapshot. Snapshot testing allows us to visually examine the output of our Babel plug-in. We give it an input, tell it a snapshot, and save it to a file. We check the snapshot into Git. This allows us to see when we affected the output of any of our trial sample tests. It also gives the use of differences when pulling requests. Of course, you can do this with any test framework, but updating the snapshot is as simple as jest-u .

// src/__tests__/index-test.js const babel = require('babel-core'); const plugin = require('.. / '); var example = ` var foo = 1; if (foo) console.log(foo); `; it('works', () => { const {code} = babel.transform(example, {plugins: [plugin]}); expect(code).toMatchSnapshot(); }); Copy the codeCopy the code

This gives us a snapshot file at ‘ ‘SRC / __ tests __ / __ snapshots __ / index-test.js.snap .

exports[`test works 1`] = ` " var bar = 1; if (bar) console.log(bar);" `; Copy the codeCopy the code

If we change “bar” to “baz” in the plug-in and run it again, we get the following results:

The received value does not match the stored snapshot 1. -snapshot + Received @@ -1,3 +1,3 @@ "-var bar = 1; -if (bar) console.log(bar);" +var baz = 1; +if (baz) console.log(baz);" Copy the codeCopy the code

We saw how the changes we made to the plug-in code affected the output of our plug-in. If the output looks good, we can run ‘jest -u to update the snapshot.

In addition to snapshot testing, we can also check the AST manually. This is a simple but fragile example. For more involved cases, you might want to use babel-traversal. It allows you to specify an object with the visitor key, just as you would with the plug-in itself.

it('contains baz', () => { const {ast} = babel.transform(example, {plugins: [plugin]}); const program = ast.program; const declaration = program.body[0].declarations[0]; assert.equal(declaration.id.name, 'baz'); // or babelTraverse(program, {visitor: ... })}); 'Copy codeCopy the code

Here, we will transform the code and then evaluate whether it behaves correctly. Note that we did not use assert in our tests. This ensures that if our plug-in does something strange, such as accidentally removing assertion lines, the test still fails.

it('foo is an alias to baz', () => { var input = ` var foo = 1; // test that foo was renamed to baz var res = baz; `; var {code} = babel.transform(input, {plugins: [plugin]}); var f = new Function(` ${code}; return res; `); var res = f(); assert(res === 1, 'res is 1'); }); Copy the codeCopy the code

The Babel core uses a similar method to take snapshots and perform tests.

This package makes testing plug-ins easier. If you are familiar with ESLint’s RuleTester you should be familiar with this. You can take a look at The Docs to fully understand what’s possible, but here’s a simple example:

import pluginTester from 'babel-plugin-tester'; import identifierReversePlugin from '.. /identifier-reverse-plugin'; pluginTester({ plugin: identifierReversePlugin, fixtures: path.join(__dirname, '__fixtures__'), tests: { 'does not change code with no identifiers': '"hello"; ', 'changes this code': { code: 'var hello = "hi"; ', output: 'var olleh = "hi"; ', }, 'using fixtures files': { fixture: 'changed.js', outputFixture: 'changed-output.js', }, 'using jest snapshots': { code: ` function sayHi(person) { return 'Hello ' + person + '! ' } `, snapshot: true, }, }, }); Copy the codeCopy the code

*** For future updates, follow @thejamesKyle and @babeljs on Twitter.

Reproduced in: https://juejin.cn/post/6844904055945314312