簡單 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/