如何修改Nx @nrwl/web:package构建生成的package.json中main与module属性

结论 #

当前@nrwl/web:package执行器的main、module字段确实是硬编码在源码逻辑中，没有开放直接配置的官方参数，无需自定义执行器，有两种更轻量的规范方案可以实现需求。

方案1：使用Nx后置钩子执行修改脚本 #

不需要封装完整的自定义执行器，只需要新增一个简单的脚本，配合Nx的目标自动钩子机制执行即可。

1. 在你的库根目录新增scripts/update-package-json.js文件：

const fs = require('fs');
const path = require('path');

// 从执行参数获取输出路径
const outputPath = process.argv[2];
const packageJsonPath = path.join(outputPath, 'package.json');

const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
const projectName = path.basename(outputPath);

// 按你的需求修改字段
packageJson.main = `./cjs/${projectName}.cjs.js`;
packageJson.module = `./esm/${projectName}.esm.js`;
// 不需要的字段可以直接删除
// delete packageJson.module;

fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));

2. 修改库的project.json配置，新增后置钩子目标：

{
  "targets": {
    "package": {
      "executor": "@nrwl/web:package",
      // 保留你原来的配置
      "options": {
        "outputPath": "dist/libs/flightroute-banner",
        // 其他原有配置
      }
    },
    "postpackage": {
      "executor": "nx:run-commands",
      "options": {
        "command": "node libs/flightroute-banner/scripts/update-package-json.js dist/libs/flightroute-banner"
      }
    }
  }
}

配置完成后，每次执行nx package flightroute-banner，Nx会自动在package任务完成后执行postpackage任务修改package.json，不需要额外手动执行命令。

方案2：切换到@nrwl/rollup执行器（更推荐） #

你已经在使用自定义Rollup配置，完全可以替换为官方的@nrwl/rollup:rollup执行器，该执行器原生支持自定义配置package.json的main、module等字段，无需额外修改逻辑。
修改库的project.json中package目标配置如下：

{
  "targets": {
    "package": {
      "executor": "@nrwl/rollup:rollup",
      "options": {
        "outputPath": "dist/libs/flightroute-banner",
        "entryFile": "libs/flightroute-banner/src/index.ts",
        "tsConfig": "libs/flightroute-banner/tsconfig.lib.json",
        // 配置输出格式
        "format": ["cjs", "esm"],
        // 直接配置package.json对应的字段值
        "main": "dist/libs/flightroute-banner/cjs/flightroute-banner.cjs.js",
        "module": "dist/libs/flightroute-banner/esm/flightroute-banner.esm.js",
        // 指定你原来的自定义Rollup配置路径
        "rollupConfig": "libs/flightroute-banner/rollup.config.js",
        // 其他原有配置项都可以保留
        "assets": []
      }
    }
  }
}

该方案完全符合Nx官方规范，不需要额外编写修改逻辑，所有配置都可以在project.json中统一管理。

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