业务项目使用自定义babel插件

要在业务项目目录中直接使用你编写的 Babel 插件，通常意味着你不想将其发布到 npm，而是希望将插件的源代码作为项目的一部分进行管理和使用。

以下是两种主要的方法，它们都允许你在业务项目目录中使用你的 Babel 插件：

方法一：直接通过文件路径引用 (适用于简单、单文件插件)

这种方法最直接，适用于你的 Babel 插件是一个简单的 JavaScript 文件，没有复杂的依赖或多文件结构。

1. 插件结构 ：

   假设你的业务项目结构如下，你可以在项目根目录下创建一个专门存放本地 Babel 插件的文件夹，例如 babel-plugins/：

   your-business-project/
   ├── src/
   │   └── index.js
   ├── babel.config.js
   ├── package.json
   └── babel-plugins/
       └── my-babel-plugin.js  <-- 你的 Babel 插件文件

2. 编写插件文件 (babel-plugins/my-babel-plugin.js) ：

   将你的 Babel 插件代码写入这个文件。例如：

   // your-business-project/babel-plugins/my-babel-plugin.js
   module.exports = function myBabelPlugin(babel) {
     const { types: t } = babel;
   
     return {
       name: "my-custom-plugin", // 插件名称，可选
       visitor: {
         Identifier(path) {
           // 示例：将所有名为 'foo' 的标识符改为 'bar'
           if (path.node.name === 'foo') {
             path.node.name = 'bar';
           }
         }
       }
     };
   };

3. 配置 Babel (babel.config.js) ：

   在你的 babel.config.js (或 .babelrc) 文件中，使用 require.resolve() 来引用你的本地插件文件。

   // your-business-project/babel.config.js
   module.exports = {
     presets: [
       '@babel/preset-env',
     ],
     plugins: [
       // 直接引用本地插件文件
       require.resolve('./babel-plugins/my-babel-plugin.js'),
   
       // 如果插件需要选项，可以这样传递：
       // [require.resolve('./babel-plugins/my-babel-plugin.js'), { option1: true }],
     ],
   };

   优点 ：简单直接，不需要额外的 package.json 或 npm install 步骤。
   缺点：如果插件有自己的依赖或更复杂的文件结构，这种方式就不太方便管理。

方法二：作为本地包通过 file: 协议引用 (推荐用于复杂或多文件插件)

这种方法模拟了 npm 包的安装方式，但插件的源代码仍然保留在你的业务项目目录内（或紧邻）。它适用于你的插件本身就是一个小型的、独立的模块，拥有自己的 package.json 和潜在的依赖。

1. 插件结构 ：

   在你的业务项目根目录下创建一个目录来存放本地包，例如 local-packages/。在这个目录下创建你的插件文件夹，并为其添加一个 package.json 文件。

   your-business-project/
   ├── src/
   │   └── index.js
   ├── babel.config.js
   ├── package.json          <-- 业务项目的 package.json
   └── local-packages/
       └── my-babel-plugin/  <-- 你的 Babel 插件目录
           ├── index.js      <-- 插件代码
           └── package.json  <-- 插件自己的 package.json

2. 编写插件文件 (local-packages/my-babel-plugin/index.js) ：

   这是你的 Babel 插件的核心代码。

   // your-business-project/local-packages/my-babel-plugin/index.js
   module.exports = function myBabelPlugin(babel) {
     const { types: t } = babel;
   
     return {
       name: "my-custom-plugin-local",
       visitor: {
         // ... 你的插件逻辑
       }
     };
   };

3. 插件的 package.json (local-packages/my-babel-plugin/package.json) ：

   为你的本地插件创建一个 package.json 文件。name 字段很重要，它将是你在业务项目 package.json 和 Babel 配置中引用的名称。

   // your-business-project/local-packages/my-babel-plugin/package.json
   {
     "name": "my-babel-plugin-local", // 这个名字很重要！
     "version": "1.0.0",
     "main": "index.js",
     "description": "My local Babel plugin",
     "private": true // 标记为私有，防止意外发布
   }

4. 业务项目 package.json 中添加依赖 ：

   在你的业务项目的 package.json 的 devDependencies 或 dependencies 中，使用 file: 协议引用你的本地插件目录。

   // your-business-project/package.json
   {
     "name": "your-business-project",
     "version": "1.0.0",
     "devDependencies": {
       // ... 其他依赖
       "my-babel-plugin-local": "file:./local-packages/my-babel-plugin"
     }
   }

5. 安装依赖 ：

   在业务项目的根目录运行 npm install 或 yarn install。

   这会将 my-babel-plugin-local 作为一个符号链接（或在某些情况下是副本）安装到你的业务项目的 node_modules 文件夹中。

6. 配置 Babel (babel.config.js) ：

   在你的 babel.config.js 中，直接使用你在插件 package.json 中定义的 name 来引用插件。

   // your-business-project/babel.config.js
   module.exports = {
     presets: [
       '@babel/preset-env',
     ],
     plugins: [
       // 使用插件的 package.json 中的 name
       'my-babel-plugin-local',
   
       // 如果插件需要选项，可以这样传递：
       // ['my-babel-plugin-local', { option1: true }],
     ],
   };

   优点：

   • 插件可以有自己的 package.json，管理自己的依赖。
   • 更接近标准的 npm 包结构，便于未来可能发布到 npm。
   • 通过 npm install 管理，避免了手动路径引用可能带来的问题。
     缺点 ：需要为插件维护一个独立的 package.json。

总结

• 简单插件 (单文件，无依赖) ：使用方法一 ，直接在 babel.config.js 中通过 require.resolve() 引用插件文件。
• 复杂插件 (多文件，有依赖，或希望结构更清晰) ：使用方法二 ，将插件作为一个本地包，通过 file: 协议在业务项目的 package.json 中引用，然后在 babel.config.js 中通过其包名引用。

选择哪种方法取决于你的 Babel 插件的复杂度和你的项目管理偏好。