如何开发 Babel 6 插件答案

【问题标题】：How to develop Babel 6 plugins如何开发 Babel 6 插件
【发布时间】：2016-03-09 18:31:03
【问题描述】：

你使用什么流程来开发 Babel 6 插件？

这是我想出的开发插件 (babel-plugin-test)：

1) 在空文件夹中运行：

npm install babel-cli babel-preset-es2015

2) 创建文件src/test.js（用于测试插件）：

class Person {
}

3) 使用以下内容创建文件夹node_modules/babel-plugin-test

node_modules/babel-plugin-test/package.json

{
  "name": "babel-plugin-test",
  "version": "0.1.0",
  "main": "lib/index.js",
  "dependencies": {
    "babel-runtime": "^5.0.0"
  },
  "devDependencies": {
    "babel-helper-plugin-test-runner": "^6.3.13"
  }
}

node_modules/babel-plugin-test/src/index.js

export default function ({types: t }) {
  return {
    visitor: {
      ClassDeclaration: function (node, parent) {
        console.log("XXX");
      }
    }
  };
}

4) 创建一个运行的脚本：

node_modules/babel-plugin-test/babel --presets es2015 --out-dir lib src
babel --plugins babel-plugin-test --presets es2015 --out-dir out src

所以它编译插件，然后使用插件编译test.js，我看到控制台日志和输出文件（在这个例子中我没有改变任何东西）。

必须有更好的方法来做到这一点。或许可以通过某种方式使用 WebStorm 或其他 Node 调试器来放置断点并进行播放（至少能够检查变量）。

【问题讨论】：

标签： babeljs

【解决方案1】：

要走的路是在代码中运行 babel，这样您就可以获得转译后的代码并与您期望的进行比较。

首先像你一样编译你的插件，然后在测试文件夹中

var transformFileSync = require('babel-core').transformFileSync
var path = require('path')
var fs = require('fs')

var plugin = require('../lib/index').default
describe('My test', function (){
  it ('Transform', function(){
    var transformed = transformFileSync(path.join(__dirname, 'testFilePath'), {
      plugins: [[plugin]]
    }).code
    var expectedCode = fs.readFileSync(..)
    assert.equal(transformed, expected)
  })
})

您可以找到一个示例here。也可以在 ES6 导入模块中编写测试，因为您需要为 mocha 提供编译器，示例见here。

【讨论】：

【解决方案2】：

对于基本测试，我使用美妙的astexplorer。只需将解析器设置为 babylon 6 并打开 transform 并将其设置为 babelv6。然后你可以把你的代码放在一个窗格中，在另一个窗格中查看 AST 结果，将你的 babel 插件放在第三个窗格中，然后在第四个窗格中查看插件结果。

对于更复杂的测试，我创建了两个项目，一个用于插件，另一个用于测试插件。我 npm link 两者并配置测试项目以使用我在 babelrc 中的插件。然后，每当我的插件更改时，我只需在我的文件/项目上运行 babel 并查看结果。

我不确定这是否是最好的方法，但它对我有用。

【讨论】：