如何在NX的ESBuild项目中添加esbuild-decorators插件？

我通过命令 nx g @nx/node:application [name] --framework none --projectNameAndRootFormat derived 创建了一个基于NX的Node.js+TypeScript项目，其project.json中的build配置如下：

"build": {
  "executor": "@nx/esbuild:esbuild",
  "defaultConfiguration": "production",
  "fileName": "main.js",
  "options": {
    "platform": "node",
    "outputPath": "dist/apps/project-name",
    "format": ["esm"],
    "bundle": true,
    "main": "apps/project-name/src/main.ts",
    "tsConfig": "apps/project-name/tsconfig.app.json",
    "assets": ["apps/project-name/src/assets"],
    "generatePackageJson": true,
    "esbuildOptions": {
      "sourcemap": true,
      "outExtension": {
        ".js": ".js"
      }
    }
  },
  "configurations": {
    "development": {},
    "production": {
      "esbuildOptions": {
        "sourcemap": false,
        "outExtension": {
          ".js": ".js"
        }
      }
    }
  }
}

项目使用@nx/esbuild:esbuild执行器，我希望引入TypeDI这类依赖注入框架，但ESBuild原生不支持TypeScript的"emitDecoratorMetadata": true配置项——这是多数依赖注入框架的必需条件。esbuild-decorators插件可让ESBuild支持该特性，且NX现在已支持为ESBuild添加插件，但找不到配置文档，请问该如何配置？

解决方案 #

1. 安装esbuild-decorators插件
   执行以下命令安装依赖：

npm install esbuild-decorators --save-dev
# 或使用yarn/pnpm
# yarn add esbuild-decorators -D
# pnpm add esbuild-decorators -D

2. 创建ESBuild插件配置文件
   在你的项目目录下（比如apps/project-name/）创建esbuild-plugins.js文件，内容如下：

const { esbuildDecorators } = require('esbuild-decorators');

module.exports = [
  esbuildDecorators({
    tsconfig: './tsconfig.app.json', // 指向项目的tsconfig配置文件
    emitDecoratorMetadata: true,
    // 可按需添加其他插件选项，比如decoratorsBeforeExport: true
  })
];

3. 修改project.json中的build配置
   在build.options.esbuildOptions中添加plugins字段，引用刚才创建的插件配置文件：

"esbuildOptions": {
  "sourcemap": true,
  "outExtension": {
    ".js": ".js"
  },
  "plugins": require("./apps/project-name/esbuild-plugins.js")
}

4. 确认TypeScript配置
   确保tsconfig.app.json中已开启装饰器相关配置：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

验证配置 #

运行nx build project-name执行编译，之后可以启动项目测试TypeDI等依赖注入框架是否正常工作，或检查编译后的代码是否包含装饰器元数据。

内容的提问来源于stack exchange，提问作者Fredrik Wallén