babeljs - 如何开发 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 或其他 Node 调试器来放置断点并进行播放(至少能够检查变量)。

Answer 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例如。