如何修改NX构建Angular可发布库后的dist目录结构

1. 移除dist中的libs前缀 #

当前构建输出路径依赖{projectRoot}变量，而你的库根目录是libs/ui-kit，所以会生成dist/libs/ui-kit层级。直接在project.json里指定固定输出路径即可：

修改build.targets.outputs配置：

"outputs": [
  "{workspaceRoot}/dist/ui-kit"
],

2. 移除components层级 #

components/button的层级来自ng-package.json的配置，分两种场景调整：

场景1：仅发布button组件 #

如果你的ui-kit库只需要输出button组件，直接修改libs/ui-kit/ng-package.json的dest和入口文件：

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit/button",
  "lib": {
    "entryFile": "src/lib/components/button/button.ts"
  }
}

场景2：ui-kit包含多个组件 #

如果要把多个组件（比如button、input）分别输出到dist/ui-kit下的对应子目录，配置多入口点：

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "entryPoints": {
    "button": "src/lib/components/button/button.ts"
    // 可添加其他组件入口，比如 "input": "src/lib/components/input/input.ts"
  }
}

3. 验证效果 #

删除旧的dist目录，重新执行nx build ui-kit，此时dist结构会变成你期望的样子：

dist
└── ui-kit
    └── button

注意事项 #

• 多库项目要确保各库的输出路径不重复
• 若构建后仍有旧结构，清理NX缓存（执行nx reset）再重新构建

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