How to develop Babel 6 plugins

Question

What process do you use to develop Babel 6 plugins?

Here's what I came up with to develop a plugin (babel-plugin-test):

1) In an empty folder run:

npm install babel-cli babel-preset-es2015

2) Create the file src/test.js (to test the plugin) with just:

class Person {
}

3) Create the folder node_modules/babel-plugin-test with the following contents

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) Create a script that runs:

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

So it compiles the plugin and then compiles test.js using the plugin and I see the console log and the output file (in this example I'm not changing anything).

There has to be a better way to do this. Maybe some way to use WebStorm or another Node debugger to put a breakpoint and play around (at least be able to inspect variables).

How to develop Babel 6 plugins

2 Answers