在多个项目中共享一个 Angular 库

Question

我正在开发一个由后端和前端组成的Angular 7+项目。现在有一个需求，需要创建另一个由前端和后端组成的项目。但是有一些可重用的前端代码可以在两个应用程序中重复使用。 我的项目结构

需求

当我读到关于库的概念时，我可以找到以下两种方法：

1）创建两个前端应用程序并共享一个公共库。由于使用了Visual Studio创建的asp.net angular模板项目（如Here所示），因此我无法采用此方法。这两个应用程序（Project One和Project Two）都有自己的FE+BE。因此，我无法将两个FE应用程序分组放在同一个文件夹中，并让它们使用共享库。

2）创建库并上传到npm作为依赖项使用。由于代码是专有的且不能在网络外共享，因此我无法采用此方法。另外，也没有本地公司npm注册表可供使用。

我知道可以使用库的概念来解决此问题。但我不理解如何在多个应用程序之间完成此操作。能否有人提供一种解决方案？谢谢！

- Vikhyath Maiya

Answer 1

考虑到您在原始帖中提到的目录情况，您可以按照 NPM 文档中提到的方法通过本地路径添加您的库：Local Paths。

- Root
|
 -- Project One 
|
 -- Project Two
|
 -- Library usued across both projects

例如，在“项目一”的package.json中，您可以将该库添加为依赖项:

"dependencies" : {
  "my-shared-library" : "file:../Library usued across both projects",
}

P.S. 我不确定库文件夹名称是否允许使用空格，但你可以尝试并找出答案。但我假设你不会使用空格。

---

替代方案和进一步计划

2. 创建库并上传到npm以便使用依赖项 我无法采取此方法，因为代码是专有的，不能在网络之外共享。而且没有本地公司 npm 注册表可供使用。

这并不完全准确。您确实可以采用此方法作为替代方案或者如果您认为将来可能在另一个项目中使用此库。正如 NPM 文档中所述，有一种方法可以实现： Git URLs as Dependencies。

package.json

"dependencies" : {
  "my-shared-library" : "Git repo address here. There are various ways to specify an address. See below.",
}

如何将该库添加为依赖项

• 假设您为该库创建了一个新的存储库：

"dependencies" : {
  "my-shared-library" : "git+ssh://[e-mail]/my-shared-library.git",
}

这样您甚至可以使用不同版本的库。比如您为Project One开发了一个新版本（即4.2.0），但它还没有准备好或不应该被Project Two使用，您可以在Project One的package.json文件中像这样添加：

"dependencies" : {
  "my-shared-library" : "git+ssh://[e-mail]/my-shared-library.git#branch-v4.2.0",
}

• 或者你可以在当前代码库中创建一个新的分支，比如说branch-for-my-shared-library（假设项目一和项目二都已经推送到了同一个代码库中）：

"dependencies" : {
  "my-shared-library" : "git+ssh://[e-mail]/my-current-project.git#branch-for-my-shared-library",
}

请注意，URL中可以指定几个协议，如文档中所述：

协议是git、git+ssh、git+http、git+https或git+file之一。

进一步说明：

• 创建库
• 依赖关系 vs 开发依赖关系

编码愉快。

- user6576367

Answer 2

1). 您可以尝试使用 npm pack 来打包您的库：

"scripts": {
   ...
   "build_lib": "ng build --prod example-lib",
   "npm_pack": "cd dist/example-lib && npm pack",
   "package": "npm run build_lib && npm run npm_pack"
}

2) 运行 'npm pack' 命令后，生成的文件名为：example-lib-0.0.1.tgz。

3) 您可以通过以下方式从其他项目中安装该文件：npm install ../{some-paths}/example-lib/dist/example-lib/example-lib-0.0.1.tgz

更多详细信息请查看：https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

- katwhocodes

---

嗯，有趣。我会试一下。 - Vikhyath Maiya

我们在项目中采用了这种方式进行实现，但如果有更好的选择，那将是非常棒的。如果您发现了更好的选项，请告诉我。谢谢。 - katwhocodes

这个解决方案还算可以，但是有些hacky，因为你需要在终端中执行许多手动任务或编写自定义脚本。 - Patrick Hillert

您可以在构建之前运行预先构建的包，例如："prebuild": "npm run package"。这样，每当您运行 npm run build 命令时，它都会在此之前运行。 - katwhocodes

Answer 3

你可以使用npm link。

在包文件夹中使用npm link将会在全局文件夹{prefix}/lib/node_modules/中创建一个符号链接，该链接指向执行npm link命令的包。

简单来说，只需要进入库文件夹并键入：

npm link

然后，您可以进入想要使用库的项目并输入：

npm link <project-name>

<project-name> 是在 package.json 文件中的名称。

如果您想在网络上共享库而不是复制和粘贴源代码，那么最好让您的公司为私有存储库付费 :)

- Christian Vincenzo Traina

---

我觉得这只适用于使用“ng serve”进行本地开发。那么在这种情况下，构建应该如何工作呢？如果我错了请指正我。 - Vikhyath Maiya

构建使用webpack，它从node_modules文件夹获取所有所需的文件，并将它们打包成一个唯一的捆绑包。重要的是这些文件在启动构建时存在于node_modules文件夹中，而不是如何进入该文件夹的方式 - 理论上你可以手写它们。 - Christian Vincenzo Traina

嗯，我仍然对CI中的这个工作原理感到困惑，不过我会尝试一下生成一个包。谢谢。 - Vikhyath Maiya