打造流行的Babel插件秘诀

创作属于你的Babel插件
现在，插件开发的流程已经很成熟了，Babel插件的构建更为方便。一般都会某个工具提供一个core，做最核心的运算，其他部分功能开放给第三方，jquery webpack babel 都是这样的。

如果你时间很充裕的话，可以先看一下 官方的handbook，知识点很全，知识点很多，可能消化要一点时间，但是还是建议读一下。

当然，你也可以按照这个步骤搭建一下自己的基础组件:

1. 安装Babel CLI

npm install --global @babel/cli

2. 创建一个新的项目

mkdir my-babel-plugin
cd my-babel-plugin
npm init -y

3. 安装必要的依赖项

npm install --save-dev @babel/core @babel/parser @babel/traverse @babel/types

4. 创建一个Babel插件文件

// my-babel-plugin.js
module.exports = function(babel) {
  return {
    visitor: {
      Identifier(path) {
        if (path.node.name === 'foo') {
          path.node.name = 'bar';
        }
      }
    }
  };
};

5. 在.babelrc文件中配置插件

{
  "plugins": ["my-babel-plugin"]
}

6. 运行Babel CLI

babel src/index.js --out-file dist/index.js

示例：创建一个将所有 console.log() 语句替换为 console.info() 语句的插件

// my-babel-plugin.js
module.exports = function(babel) {
  return {
    visitor: {
      CallExpression(path) {
        if (
          path.node.callee.name === 'console' &&
          path.node.arguments[0].type === 'StringLiteral'
        ) {
          path.node.callee.name = 'console.info';
        }
      }
    }
  };
};

示例：创建一个将所有箭头函数转换为普通函数的插件

// my-babel-plugin.js
module.exports = function(babel) {
  return {
    visitor: {
      ArrowFunctionExpression(path) {
        path.replaceWith(
          babel.types.functionExpression(
            path.node.params,
            path.node.body,
            path.node.generator,
            path.node.async
          )
        );
      }
    }
  };
};

你甚至可以构建一个在线转换工具，在网站上实时测试插件的功能，修改参数后实时更新。

如果您想更进一步，可以阅读Babel的官方文档，了解更高级的插件开发技巧。