如何用NX构建Stencil生成的React库并发布至NPM？

核心结论：优先使用@nrwl/react:package执行器 #

这是NX官方提供的、与Angular的@nrwl/angular:package逻辑对齐的React库构建方案，会自动生成包含package.json、类型文件、编译代码的完整可发布包，无需手动补全资源。

1. 配置@nrwl/react:package执行器 #

修改目标React库的project.json文件，将build目标的执行器替换为@nrwl/react:package，并配置关键参数：

"build": {
  "executor": "@nrwl/react:package",
  "options": {
    "outputPath": "dist/packages/your-react-stencil-lib",
    "tsConfig": "packages/your-react-stencil-lib/tsconfig.lib.json",
    "packageJson": "packages/your-react-stencil-lib/package.json",
    "main": "packages/your-react-stencil-lib/src/index.ts",
    "formats": ["cjs", "esm"], // 同时生成CommonJS和ES模块格式
    "assets": [
      "packages/your-react-stencil-lib/README.md",
      "packages/your-react-stencil-lib/LICENSE",
      {
        "input": "packages/your-react-stencil-lib/styles",
        "glob": "**/*.css",
        "output": "./styles"
      }
    ]
  }
}

执行构建命令：

nx build your-react-stencil-lib

构建完成后，dist/packages/your-react-stencil-lib目录会生成完整的可发布包，包含：

• 自动调整路径后的package.json（main/module字段指向对应格式的输出文件）
• 编译后的JS代码（CommonJS和ES模块版本）
• TypeScript类型声明文件（.d.ts）
• 配置的静态资源（README、样式等）

直接进入该目录执行npm publish即可发布到NPM。

2. 关于Rollup方案的补充（如果坚持使用） #

你之前用@nrwl/web:rollup生成的bundle可以发布，但需要手动补充package.json并调整字段。可以通过rollup-plugin-copy插件自动复制源package.json到输出目录：

1. 安装依赖：

npm install rollup-plugin-copy --save-dev

2. 修改Rollup配置文件（或在project.json的rollupOptions中添加）：

import copy from 'rollup-plugin-copy';

export default {
  input: 'packages/your-react-stencil-lib/src/index.ts',
  output: {
    file: 'dist/packages/your-react-stencil-lib/index.js',
    format: 'esm'
  },
  plugins: [
    // 其他Rollup插件（如@rollup/plugin-typescript等）
    copy({
      targets: [
        { src: 'packages/your-react-stencil-lib/package.json', dest: 'dist/packages/your-react-stencil-lib' }
      ]
    })
  ]
};

3. 手动修改输出目录的package.json，将main/module字段指向生成的bundle文件，同时确保private设为false。

3. Webpack方案的可行性 #

@nrwl/web:webpack也可以用于构建库，但需要配置输出为UMD/CommonJS格式，并复制package.json等资源：

修改project.json的build目标：

"build": {
  "executor": "@nrwl/web:webpack",
  "options": {
    "outputPath": "dist/packages/your-react-stencil-lib",
    "main": "packages/your-react-stencil-lib/src/index.ts",
    "tsConfig": "packages/your-react-stencil-lib/tsconfig.lib.json",
    "target": "node",
    "outputHashing": "none",
    "library": "your-react-stencil-lib",
    "libraryTarget": "umd",
    "assets": [
      "packages/your-react-stencil-lib/package.json",
      "packages/your-react-stencil-lib/README.md"
    ]
  }
}

构建后同样需要手动调整package.json的main字段指向Webpack生成的bundle，缺点是打包体积通常比Rollup大，且类型文件需要单独处理。

4. Gulp方案的说明 #

Gulp完全可行，但需要手动编写任务流：

• 编译TypeScript到JS和.d.ts文件
• 复制静态资源（package.json、README等）
• 处理样式文件

这种方式灵活性高，但需要维护额外的Gulp配置，没有NX官方执行器省心，仅推荐有特殊定制需求时使用。

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