简单 babel plugin 开发-使用lerna 工具

babel在现在的web 应用开发上具有很重要的作用，帮助我们做了好多事情，同时又有
比较多的babel plugin 可以解决我们实际开发上的问题。
以下只是学习下如果编写一个简单的babel plugin，项目使用lerna 进行代码包管理

插件开发模型

项目准备

• lerna 项目初始化

lerna init

• 创建plugin package

lerna create MyFirstBabelPlugin

• 创建使用plugin 的package

lerna create PluginUsage

• 项目结构

├── README.md
├── lerna.json
├── package.json
└── packages
    ├── MyFirstBabelPlugin
    │ ├── README.md
    │ ├── lib
    │ │ └── MyFirstBabelPlugin.js
    │ └── package.json
    └── PluginUsage
        ├── README.md
        ├── babel.config.js
        ├── lib
        │ └── PluginUsage.js
        ├── package-lock.json
        └── package.json

编写代码

• babel plugin 代码
  packages/MyFirstBabelPlugin/lib/MyFirstBabelPlugin.js

// basic babel plugin 
module.exports= function ({types: t}) {
    return {
      visitor: {
        Identifier(path) {
          let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
          path.node.name = name.split('').reverse().join('');
        }
      }
    };
  }

• 调用plugin 的代码
  主要是babel 配置文件的使用
  packages/PluginUsage/babel.config.js

const presets = [
    [
      "@babel/env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
      },
    ],
  ];

const plugins = [
    "module:myfirstbabelplugin"
]
module.exports = { presets,plugins };

• 调用plugin package package.json 配置
  packages/PluginUsage/package.json

{
  "name": "pluginusage",
  "version": "1.0.0",
  "description": "demo",
  "author": "dalongrong <1141591465@qq.com>",
  "homepage": "",
  "license": "ISC",
  "main": "lib/PluginUsage.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "publishConfig": {
    "registry": "https://registry.npm.taobao.org"
  },
  "scripts": {
    "build": "babel lib -d dist"
  }
}

• 调用plugin package 添加依赖包
  babel 以及自己编写的插件
  babel 依赖

npm install @babel/core @babel/cli @babel/preset-env --save-dev 

自己编写babel plugin 的添加（使用lerna）

cd packages/PluginUsage
lerna add myfirstbabelplugin

执行

为了方便添加了全局的npm script （lerna 项目根目录）

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^3.8.0"
  },
  "scripts": {
    "build":"lerna run build"
  }
}

• 执行
  lerna 项目根目录

yarn run v1.13.0
$ lerna run build
lerna notice cli v3.8.0
lerna info Executing command in 1 package: "npm run build"
lerna info run Ran npm script 'build' in 'pluginusage' in 1.1s:

> pluginusage@1.0.0 build /Users/dalong/mylearning/babel-plugin-demo/packages/PluginUsage
> babel lib -d dist

Successfully compiled 1 file with Babel.
lerna success run Ran npm script 'build' in 1 package in 1.1s:
lerna success - pluginusage
✨ Done in 1.94s.

• 效果

说明

代码很简单，只是学习下开发的流程，建议看看后边的几个参考资料，开发中一个方便的ast 查看工具 https://astexplorer.net/，可以帮助我们
更好的了解ast

参考资料

https://github.com/kentcdodds/babel-plugin-handbook/blob/master/README.md
https://github.com/rongfengliang/babel-plugin-demo
http://www.startupboost.io/posts/babel-plugin-css-in-js-example-learn
https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md
https://babeljs.io/docs/en/usage
https://astexplorer.net/