How to create a babel plugin for internal use

Question

How do we use a babel plugin that is not already accepted in a babel repository? I had trouble finding this answer reading through the babel plugin documentation.

We are interested in writing a babel plugin for for...in loops to address a bug in ios9 ( ios9 Safari miscalculating sum ). Although we would be happy to contribute it to the babel community, I was also wondering if it doesn't get accepted or isn't ready for general consumption, how to start using and testing it locally.

Answer 1

It's possible to make use of custom babel plugins that you can host on git.

You can refer to https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md for learning how you can develop and test your babel plugin locally.

Once you have developed the plugin, you can add a dependency for it in your project's package.json file.

Note that if you plan to make the plugin repository private, you'd have to create a personal access token (for Github) to allow npm to fetch repository contents. In that case, the example entry in your package.json file would be as follows:

"babel-plugin-transform-for-of-loop": "git+https://{token}:x-oauth-basic@github.com/username/babel-plugin-transform-for-of-loop"

Whatever package name that you pick for your plugin, you will need to add a reference for it in the .babelrc file. For this example, it would be as follows:

{
  ...
  "plugins": [
    "babel-plugin-transform-for-of-loop"
  ]
}

With that done, you should simply run npm install and your plugin would become active for your project.