如何开发Babel 6插件

Question

你使用什么过程来开发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或其他节点调试器来设置断点并尝试(至少能够检查变量)。

Answer 1

方法是在代码中运行babel，这样您就可以获得转换后的代码，并与预期的代码进行比较。

首先像你做的那样转换你的插件，然后在test文件夹中

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。也可以在mocha导入模块中编写测试，因此您需要为ES6提供编译器，请参阅here获取示例。

Answer 2

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

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

我不确定这是不是最好的方法，但它对我来说是有效的。