如何使用 angularJS 在多个项目之间共享代码

Question

我想知道在多个 angularJS 项目之间共享公共库和自己的模块的最佳做法是什么。

假设我正在从事两个不同的项目。两者都依赖于 angularJS、bootstrap 等库。

我的文件结构如下：

• 项目 1
  • index.html
  • CSS
  • js
    • 模块 A
    • 模块 B
  • 库
    • 角度
    • 引导
• 项目 2
  • index.html
  • CSS
  • js
    • 模块 B
    • 模块 X
  • 库
    • 角度
    • 引导

所以我正在考虑只创建一个包含所有共享组件的目录，以便我得到某事。喜欢：

• 共享
  • 角度
  • 引导
  • 模块 B
• 项目 1
  • index.html
  • CSS
  • js
    • 模块 A
• 项目 2
  • index.html
  • CSS
  • js
    • 模块 X

我的模块 B 写成这样：

angular.module("moduleB", [])
    .service("SB", [function () {/*functionality here*/}]);
    .factory("FB", [function () {/*functionality here*/}]);

然后将它作为依赖项包含在我的项目 1/2 中，例如：

angular.module("project1", ["moduleB"]);

实现这种方法。

那会是最好的方法吗？有什么替代方案？

Answer 1

您可以这样做，但如果您希望项目 1 和项目 2 使用两个不同版本的共享组件，这可能会让您头疼。想象一下，您需要发布带有最新共享组件的 Project 1，但 Project 2 仍然依赖于以前版本的共享组件。真是一团糟。其他一些选项：

1. 将可包含在任一项目中的共享组件 Bower 组件作为依赖项（请参阅http://briantford.com/blog/angular-bower）
2. 将所有共享资产编译成一个可相互访问的 URL（参见https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85）
3. 基本上在项目之间复制/粘贴组件，可以手动或使用 gulp 之类的工具（请参阅 https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ）

第二个选项有很多移动部件，需要对您的应用程序进行更改，更不用说无法在每个项目中部署不同版本的共享代码。第一个的好处是很容易分成 3 个存储库：项目 1、项目 2 和共享。如果 Shared 是 Project 1 和 Project 2 中的 Bower 依赖项，则简单的 bower update 将为您提供任一项目中的最新版本。或者，您可以将项目锁定到特定版本的 Shared。

选项 3 似乎为您提供了最大的控制权，但您很快就会忘记您的项目正在使用哪个版本的 Shared。选项 1 解决了这个问题。

Answer 2

另一个可能的选择是将您的共享代码发布为 npm 模块。如果代码是私有的，那么您可以使用npm Private Modules，尽管使用私有模块是有成本的。

使用 d.jamison 的回答中描述的这种方法或 Bower 方法，尝试根据其特定目的将您的模块分解为更小的模块，而不是使用大型的整体“AllOurSharedCode”模块。

这样做的好处是，如果您发现错误或进行改进，您可以更轻松地准确了解您的哪些项目可能会受到影响。 require 或 ES2015 import 语法在这方面也有很大帮助，就像你会说的那样，例如import { calculateLineTotal } from OrderLogic.js，因此很容易找到代码中更改 calculateLineTotal 会影响的所有位置。

Answer 3

或者干脆……

"dependencies" : {
  "shared-code" : "git://github.com/user/shared-code.git",
}

Answer 4

另一种方法是为常用模块创建一个新的https://lerna.js.org/ 存储库，然后将它们发布到私有存储库以在您的其他项目中使用。