搭一个属于自己babel插件的调试架子

[juanjuan2wei]

首先来看一下官方插件babel-import-plugin的目录结构

├╴babel-plugin-import/
│    │    
│    ├╴lib/ (打包好的代码)
│    │     ├╴index,js
│    │     └╴Plugin.js
│    │     
│    ├╴src/ (源代码)
│    │     ├╴index,js
│    │    └╴Plugin.js
│    │        
│    ├╴package.json
│    └ README.md

ok,现在自己手手动搭建一个属于自己的调试架子:

├╴babel-gothrogh/
│    │    
│    ├╴build/ (打包好的插件代码)
│    │     ├╴index,js
│    │     └╴Plugin.js
│    │  
│    ├╴dist/ (插件将source代码转译后的代码)
│    │        
│    ├╴plugins/ (插件文件夹)
│    │     └╴my-plugin-import（具体的某一个插件）
│    │               ├╴index,js (入口)
│    │               └╴plugin,js (插件代码)
│    │    
│    ├╴src/
│    │     └╴source.js (需要babel转译的代码)
│    ├╴package.json
│    └ .babelrc

现在以babel-plugin-import作为事例调试，可以把babel-plugin-import中src下面代码对应复制到my-plugin-import目录对应文件下。

然后在package.json中配置script：

"scripts": {
    "start": "babel src/source.js -o dist/compiled.js",
  },

通过babel编译，把src/source.js文件编译到dist目录下的compiled的目录之中.

你看官方插件的代码你可以看到，它用import 引入，这是esModule的引入方式，直接跑代码肯定是会报错的，需要你使用Common.js的引入方式。

这也是为什么还有一个build文件夹，build文件夹中，放置的就是通过做过兼容之后的插件代码，其实就是用preset-env这个预设就行了，之后我们的处理source.js文件的代码就是build中的编译好的插件代码来做的。

你可以看到官方也是这么做的，它lib文件夹的代码就是做过兼容之后的插件代码。

所以现在npm install babel-preset-env安装，然后配置.babelrc文件:

"presets": ["env"]

然后在package.json中再添加一个script来做编译处理：

"scripts": {
    "start": "babel src/source.js -o dist/compiled.js",
+  "build": "babel plugins/my-plugin-import -d build"
  },

这句代码的意义就是将plugins/my-plugin-import的代码，通过babel转译到build文件当中。

运行npm run build，你可以看到dist文件中生成的编译之后的插件代码。

现在就可以在.babelrc中配置具体要引入插件的路径了。

"presets": [], //这里清空之前的"env"，可以更清晰的看到插件做了什么事。
"plugins": [
  [ 
    "./build/index.js", // 转译后的插件代码
      {
        "libraryName": "basic"
      }
  ]
]

在source中代码写到：

import { Button } from "basic"
console.log(Button) // 必须引用一下，否者这个插件不会去做转译的工作

就可以在dist/compiled,js中看到转译后的代码:

import { Button } from "basic/lib/button"

现在你就可以在plugins下更改，调试，或者添加自己的逻辑，记住每次改完了之后，build一下再start.