Create and use Babel plugin without making it a np

2020-06-01 05:04发布

问题:

In my project, I'm using Babel 6 with the require hook. I need to load a custom babel plugin that I wrote. But do I really need to publish my plugin using npm first, and then include the plugin name in my main project's .babelrc?

Is there any way to just directly load the plugin code? In other words, can I just load the following directly?

export default function({types: t }) {
  return {
    visitor: {
      ...
    }
  };
}

回答1:

Where you list your plugins in your .babelrc, provide the path to your plugin instead of your standard published plugin name.

"plugins": ["transform-react-jsx", "./your/plugin/location"]

When exporting your plugin function, you'll probably need to use module.exports = instead of export default, since ES2015 modules haven't been fully implemented in Node yet.



回答2:

This is my entire babel.config.js file.

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];
  const plugins = [ 
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    "c:\\projects\\my-babel-plugin"
  ];

  return {
    presets,
    plugins
  };
}

First item in the plugins array is a plugin with options in form of an array. Second item is my own local plugin.

Inside of my-babel-plugin folder there needs to be a package.json with the "main" entry, usually "main": "lib/index.js" or "main": "src/index.js".