最近在做自动国际化，用到了babel的插件，所以为了减小自动国际化的篇幅，就把这部分单独提出来，目的是为了能让小白都能看懂babel插件的真实面目。

babel插件

babel的编译流程：

主要分为三步，流程主要为：

parsing（解析）、transforming（转化）、generating（生成）

parsing: 它使用@babel/parser库，负责将es6代码进行语法分析和词法分析后转换成抽象语法树AST
transforming: plugin插件利用 @babel/traverse库来，来遍历AST节点，操作他们，用它提供的 API 来编写对AST的遍历和修改逻辑，由此来将一种AST转换为另一种AST
generating：``@babel/generator负责将处理后的 AST树 生成 新的 es5 代码

Plugins 和 Presets 的运行顺序

Plugins 在 Presets 前运行
Plugins 顺序从前往后排列
Presets 顺序是颠倒的（从后往前）

推荐一个写插件好用的AST语法树结构工具，在写插件的时候，你不要知道他的type到底是什么，就可以用这个工具帮你查询。

AST抽象语法树结构网站： AST Explorer

babel编译文件

引入babel：npm install --save-dev @babel/cli
在src/index.js文件里面写一个函数

js 复制代码

const fn = () => {
  console.log('hello babel')
}

3.用babel编译执行命令

js 复制代码

npx babel src --out-dir lib

结果

我想编译某一个文件就写这样：

js 复制代码

 npx babel src/index.js --out-dir lib
  npx babel src/app.js --out-dir lib

在lib下面就会出现编译后的具体的文件。

babel插件实现

现在我们写一个插件，希望把具体index.js里面 ceshi 的函数名改成test,把你的函数copy到 AST Explorer里面，然后点一下 ceshi 函数名，就会出现对应的 AST结构。

其实babel插件就是一个函数，把这个函数接入到babel的配置文件中，它就会自动执行。所以在plugin/index.js文件里面导出一个函数就好了。

在return里面导出一个编译器对象，它包含一个visitor属性，它里面包含了我们要操作的内容，比如在上图，我们看到函数名的结构是：Identifier，那么咱们的插件就变成了这样的，顺便在控制台打印下path.name看看

创建babel.config.js文件，引入插件

执行命令：

js 复制代码

npx babel src/index.js --out-dir lib

发现

写一下插件业务

js 复制代码

module.exports = function () {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name;
        if (name === 'ceshi') {
          console.log(path.node)
          path.node.name = 'test'
        }
      },
    },
  };
}

执行npx babel src/index.js --out-dir lib查看结果：

你看一个小小的babel插件就搞定了，我想打包发布到npm上，然后在其他包里面使用怎么办？

babel插件发布npm

npm login输入用户名和密码，报错code 403

因为源地址应该是淘宝的，所以安装 npm 管理器：nrm，之前有个nvm是node版本管理器，现在出来个nrm，专门管理npm的源地址：

js 复制代码

npm i nrm -g
nrm ls
nrm use npm

你要想看看现在用的是哪个镜像源，就执行下nrm ls，或者 npm config get registry

现在再登陆

js 复制代码

npm login

在发布之前，一定要创建一个文件是.npmignore 在这个文件里面写上你不需要发布的文件比如：

在发布之前，要对代码进行打包，在npm里面的文件一般都是处理以后的文件，这样publish的时候体积比较小，使用的时候才快。一般工具库打包都用的rollup，一般应用型项目才会用webpack和vite。

js 复制代码

npm i rollup -D

创建配置文件：

在package.json 的scripts里配置命令：

执行打包

js 复制代码

npm run build

执行发布

js 复制代码

npm publish

它会把你项目下面所有的东西都发布到npm上去，在发布过程中，我发现我的项目名字和别人的重复了，发布不上去，我就改了项目要名叫：babel-plugin-change-name1

备注：在打包的时候，请一定要将代码统一掉，要么全部是ESM 的，要么是commonjs的。我的项目采用的ESM，在package.json里面配置type：module就好了。当然 rollup 默认支持ESM，你要是想要打包commonJS的就要用插件了。所以没有必要这么做。我们只需要将工具包和使用包全部默认是ESM 就不会出现不必要的bug。

检查发现工具代码里面有commonJS的导出，所以赶紧改改，再次打包，发布即可。

测试babel插件

在另外一个项目里面安装测试下看看

js 复制代码

npm i babel-plugin-change-name1 -D

执行babel编译命令报错

说明这个vite应用默认支持commonJS,需要在package.json里面配置

把babel插件里面的测试文件拿过来，然后再咱们的项目里面执行npx babel src/index.js --out-dir lib查看结果：

终于把ceshi 改成了 test 是不是？

很明显这样不合理，我们一般都是执行打包的时候，babel才去执行的，现在是用一个命令在执行，我们想办法把他配到webpack或者vite里面去，当执行npm run build 的时候，babel自动处理代码。

babel接入打包工具webpack、vite

vite集成babel

js 复制代码

安装
pnpm i vite-plugin-babel @babel/core -D

然后进入vite.config.ts文件中使用babel插件，并且将 build.target 设置为es2015 即可

js 复制代码

import vue from '@vitejs/plugin-vue'
import babel from "vite-plugin-babel";
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  base: './',
  plugins: [
    babel(),
    vue(),
    vueJsx(),
    // 其他插件...
  ],
  build: {
    target: 'es2015'
  }
})

webpack5 集成babel

安装

js 复制代码

npm install -D babel-loader @babel/core @babel/preset-env

webpack.config.js配置

js 复制代码

module: {
  rules: [
    {
      test: /\.?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

babel.config.json配置

js 复制代码

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": [
    // 不污染全局，在运行时加载
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}