如何发布 NX 库并捆绑其依赖项？

Question

这个问题似乎遍布 GitHub 的 NX 存储库，但是我在那里找不到任何有效的解决方案。

\n

我的工作区包含两个可构建的库：ui/avatar和ui/icon一个可发布的库，称为bar

\n

我的想法是使用ui/avatar和ui/icon作为内部 monorepo 库（例如，这些库可以直接导入到应用程序中），但我也想将这 2 个可构建的库封装到npm 包中bar并作为 npm 包发布bar，以便外部消费者可以从中受益。

\n

以下是文件结构的总体概述：

\n

libs\n \xe2\x94\xa3 external\n \xe2\x94\x83 \xe2\x94\x97 bar\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 src\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 lib\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 external-bar.module.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 ng-package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 project.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 tsconfig.json\n \xe2\x94\xa3 ui\n \xe2\x94\x83 \xe2\x94\xa3 avatar\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 src\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 lib\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 avatar\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 avatar.component.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 ui-avatar.module.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 index.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 ng-package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 project.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 tsconfig.json\n \xe2\x94\x83 \xe2\x94\x97 icon\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 src\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 lib\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 icon\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 icon.component.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 ui-icon.module.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 index.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 ng-package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 project.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 tsconfig.json\n

\n

最初的部分有效。
\n我能够导入ui/avatar并bar生成@blue/bar包。问题是生成package.json的@blue/bar看起来如下：

\n

{\n  "name": "@blue/bar",\n  "version": "0.0.1",\n  "peerDependencies": {\n    "@angular/common": "^14.1.0",\n    "@angular/core": "^14.1.0",\n    "@blue/ui-avatar": "0.0.1" <-- this!!\n  },\n  "dependencies": {\n    "tslib": "^2.3.0"\n  },\n  "module": "esm2020/blue-bar.mjs",\n  "es2020": "esm2020/blue-bar.mjs",\n  "esm2020": "esm2020/blue-bar.mjs",\n  "typings": "index.d.ts",\n  "exports": {\n    "./package.json": {\n      "default": "./package.json"\n    },\n    ".": {\n      "types": "./index.d.ts",\n      "es2020": "./esm2020/blue-bar.mjs",\n      "esm2020": "./esm2020/blue-bar.mjs",\n      "default": "./esm2020/blue-bar.mjs"\n    }\n  },\n  "sideEffects": false\n}\n

\n

生成的包预计ui/avatar是一个现有的npm 包（因此存在于某个注册表中），但我真正需要的是将其捆绑为@blue/barui/avatar包的一部分，而不是作为第三方依赖项。

\n

我尝试调整tsconfig.json库文件bar以某种方式尝试在本地解决依赖关系（使用paths），但它似乎不起作用。

\n

  "compilerOptions": {\n    "declarationMap": false,\n    "paths": {\n      "@blue/ui-avatar": ["libs/ui/avatar/src/index.ts"],\n      "@blue/ui-icon": ["libs/ui/icon/src/index.ts"]\n    }\n  }\n

\n

任何提示将不胜感激:)

\n

Answer 1

最终，考虑到问题仍未解决，我决定编写一个自定义的 Nx 执行器来完成这项工作。将在这里分享，以便也许可以帮助其他人。

您可以从这里通过 npm 安装执行器https://www.npmjs.com/package/@altack/nx-bundlefy

另外，源代码可以在 Github 中找到： https: //github.com/altack/nx-bundlefy