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

Question

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

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

我的文件结构如下：

Project 1

index.html

css

js

module A

module B

lib

angular

bootstrap

Project 2

index.html

css

js

module B

module X

lib

angular

bootstrap

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

Shared

angular

bootstrap

module B

Project 1

index.html

css

js

module A

Project 2

index.html

css

js

module 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 使用两个不同版本的共享组件，这可能会让您头疼。想象一下，您需要使用最新的共享组件发布项目 1，但项目 2 仍然依赖于先前版本的共享组件。真是一团糟。其他一些选项：

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

第二个选项有很多移动部分，需要更改您的应用程序，更不用说无法在每个项目中部署不同版本的共享代码。第一个的好处是可以轻松分成 3 个存储库：项目 1、项目 2 和共享。如果 Shared 是项目 1 和项目 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/ 存储库，然后将它们发布到私有存储库以用于您的其他项目。

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

How to share code between multiple projects with angularJS

javascript

module

shared-libraries

angularjs