如何在Parcel 2构建的Node.js Web项目中编写本地自定义插件

完全不需要将Parcel插件发布到npm，也不需要单独作为npm依赖安装，你可以直接在当前项目内部编写本地插件，执行build/dev脚本时Parcel会自动加载运行这些插件。

具体实现步骤 #

1. 创建本地插件存放目录 #

在项目根目录新建专门存放自定义插件的文件夹，比如命名为parcel-plugins，如果你要写多个不同功能的插件，可以在这个目录下再分不同子目录存放。

2. 编写插件代码 #

Parcel 2的插件本质是遵循对应接口规范的Node模块，不同类型的插件对应不同的命名前缀和接口，以下是一个最常见的构建完成后自动执行逻辑的报告器（Reporter）插件示例：

1. 新建插件目录parcel-plugins/bundle-logger，在目录下创建入口文件index.js：

   const { Reporter } = require('@parcel/plugin');
   
   module.exports = new Reporter({
     async report({ event, options }) {
       // 监听构建成功事件
       if (event.type === 'buildSuccess') {
         const bundles = event.bundleGraph.getBundles();
         console.log(`\n构建完成，共生成 ${bundles.length} 个产物文件：`);
         bundles.forEach(bundle => {
           console.log(`- dist/${bundle.filePath.split('/').pop()}`);
         });
       }
     }
   });
   

2. 在同目录下创建插件的package.json文件，声明插件基本信息：

   {
     "name": "parcel-reporter-bundle-logger",
     "main": "index.js",
     "engines": {
       "parcel": "^2.0.0"
     }
   }
   

   注意：Parcel通过包名前缀识别插件类型，不同类型插件需要对应前缀：

   • 转换器插件：parcel-transformer-*
   • 打包器插件：parcel-packager-*
   • 报告器插件：parcel-reporter-*
   • 解析器插件：parcel-resolver-*
   • 运行时插件：parcel-runtime-*
     编写对应类型插件时，包名必须匹配前缀规则才能被Parcel正常识别。

3. 配置.parcelrc加载本地插件 #

在项目根目录新建.parcelrc配置文件，继承默认配置的同时，把本地插件加入对应加载列表，本地插件直接写相对路径即可：

{
  "extends": "@parcel/config-default",
  "reporters": ["...", "./parcel-plugins/bundle-logger"]
}

配置项中的"..."代表保留Parcel默认的同类型插件配置，不要省略，否则会覆盖内置的构建日志、错误提示等默认能力。如果是其他类型插件，把插件路径加到对应配置项（比如transformers、packagers）里即可。

4. 验证运行 #

直接执行你原来的npm run build命令，不需要额外执行安装、链接操作，你编写的插件逻辑就会自动触发运行。

补充说明 #

• 本地插件和发布到npm的插件能力完全一致，所有Parcel官方提供的插件API都可以正常调用，没有功能限制。
• 如果你后续需要把插件复用到其他项目，再发布到npm或者通过npm link关联即可，本地开发调试阶段完全不需要走发布流程。
• 插件代码修改后，Parcel的热更新会自动重载插件逻辑，开发模式下不需要重启服务。

内容的提问来源于stack exchange，提问作者Andez