Question

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

我们假设我正在开展两个不同的项目。两者都依赖于angularJS，bootstrap等库。

我的文件结构如下：

项目1

的index.html

CSS

JS

模块A

模块B



LIB

角

自举





项目2

的index.html

CSS

JS

模块B

模块X



LIB

角

自举

所以我在考虑创建一个包含所有共享组件的另一个目录，这样我就可以了。像：

共享

角

自举

模块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*/}]);

然后将其作为依赖项包含在我的Project 1/2中：

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

实现这种方法。

那会是最好的方法吗？什么可以替代？

Answer 1

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

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

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

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

Answer 2

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

使用d.jamison的答案中描述的这种方法或Bower方法，尝试根据具体目的将模块分解为更小的模块，而不是使用大型单片＆＃34; AllOurSharedCode＆＃34;模块。

这样做的好处是，如果您发现错误或进行改进，您可以更轻松地查看您的哪些项目可能会受到影响。 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/ 存储库，然后将它们发布到私有存储库以在您的其他项目中使用。

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

4 个答案: