Angular 库捆绑本地依赖

Question

我有两个库：核心库和客户端库。

\n

核心是私有的，而客户端是要发布的。我想将核心包含在客户端捆绑包中（客户端使用核心功能），因此最终用户不需要管理核心依赖项。

\n

\xc2\xbf我该怎么做？任何帮助，将不胜感激。

\n

包

\n

packages\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @lib\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core -> ../../../core\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82       \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client.ts\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.ts\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n        \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 core.ts\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.ts\n

\n

packages/client/node_modules/@lib-core正如你所看到的，从指向到核心有一个象征意义。这使得当我在本地环境中运行应用程序时，它会找到对 core 的引用。问题是生成构建后，没有链接。

\n

核心/package.json

\n

packages\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @lib\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core -> ../../../core\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82       \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client.ts\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.ts\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n        \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 core.ts\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.ts\n

\n

核心/ng-package.json

\n

{\n  "dependencies": { "tslib": "^1.10.0" },\n  "main": "src/public-api.ts",\n  "name": "@lib/core",\n  "scripts": {\n    "build": "ng build core",\n    "test": "ng test core"\n  },\n  "version": "0.0.1"\n}\n

\n

客户端/package.json

\n

{\n  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",\n  "dest": "../../dist/core",\n  "lib": {\n    "entryFile": "src/public-api.ts"\n  }\n}\n

\n

客户端/ng-package.json

\n

{\n  "bundledDependencies": ["@lib/core"],\n  "dependencies": {\n    "@lib/core": "^0.0.1",\n    "tslib": "^1.10.0"\n  },\n  "main": "src/public-api.ts",\n  "name": "@lib/client",\n  "scripts": {\n    "build": "ng build client",\n    "test": "ng test client"\n  },\n  "version": "0.0.1"\n}\n

\n

正如您所看到的，我bundledDependencies在 中使用了 npm client/package.json，如此处所述。npm pack这在内部运行时有效package/client，但我想首先使用 Angular 进行构建（因此它会生成 javascript 代码并应用性能技术）。我的目的是在生成构建后打包。

\n

距离

\n

生成捆绑包后，我尝试npm install在里面运行dist/client运行以查看是否可以从那里安装并打包依赖项。

\n

\n

它抛出错误404 Not Found \'@lib/core@^0.0.1\' is not in the npm registry.

\n

\n

dist/client这是构建后的树：

\n

client\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 bundles\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.umd.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.umd.js.map\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.umd.min.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 lib-client.umd.min.js.map\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 esm2015\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 esm5\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 fesm2015\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 fesm5\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 client.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.d.ts\n

\n

具有dist/client/package.json在包内定义的相同依赖项

\n

{\n  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",\n  "dest": "../../dist/client",\n  "lib": {\n    "entryFile": "src/public-api.ts",\n    "umdModuleIds": {\n      "@lib/core": "@lib/core"\n    }\n  },\n  "whitelistedNonPeerDependencies": ["@lib/core"]\n}\n

\n

这是文件中的导入bundles/lib-client.umd.js：

\n

client\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 bundles\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.umd.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.umd.js.map\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.umd.min.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 lib-client.umd.min.js.map\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 esm2015\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 esm5\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 fesm2015\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 fesm5\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 client.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib-client.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.d.ts\n

\n

看起来，它不是复制核心代码，而是将其作为外部依赖项引用。

\n

回顾

\n

此问题的目标是为用户生成包含库的单个捆绑包。

\n

---

\n

我还有另一个关于如何在 ci 中测试它的问题：Lerna package import in CI

\n

Answer 1

由于您的核心是私有的并且客户端具有直接依赖关系，因此您不需要将其视为本地包。而是使用相对路径直接访问核心模块。

即）从 package.json 中删除依赖项并使用客户端包中的相对路径直接导入核心。

例如：

第 1 步：从客户端 package.json 中删除核心依赖项

客户端/package.json

{
  "bundledDependencies": ["@lib/core"],
  "dependencies": {
    "tslib": "^1.10.0"
  },
  "main": "src/public-api.ts",
  "name": "@lib/client",
  "scripts": {
    "build": "ng build client",
    "test": "ng test client"
  },
  "version": "0.0.1"
}

步骤2：使用相对路径或别名（使用@）导入核心

在 client.ts 中导入 core（在 src/lib 内的客户端包内）

包/client/src/lib/client.ts

import core from "@lib/core”