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

How to share code between multiple projects with angularJS

本文关键字：项目 之间 共享 代码 何使用 angularJS      更新时间：2023-09-26

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

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

我有一个文件结构如下：

  • 项目 1
    • 索引.html
    • .css
    • .js
      • 模块 A
      • 模块 B
    • 自由
      • 角
      • 启动
  • 项目 2
    • 索引.html
    • .css
    • .js
      • 模块 B
      • 模块 X
    • 自由
      • 角
      • 启动

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

  • 共享
    • 角
    • 启动
    • 模块 B
  • 项目 1
    • 索引.html
    • .css
    • .js
      • 模块 A
  • 项目 2
    • 索引.html
    • .css
    • .js
      • 模块 X

我有模块 B 写成：

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

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

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

来实现这种方法。

这是最好的方法吗？还有什么替代方案？

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

  1. 使共享组件成为可以作为依赖项包含在任一项目中的 Bower 组件（请参阅 http://briantford.com/blog/angular-bower）
    2. 将所有
  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 和共享。如果共享是项目 1 和项目 2 中的 Bower 依赖项，则一个简单的bower update将为你获取任一项目中的最新版本。或者，您可以将项目锁定到特定版本的"共享"。

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

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

使用

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

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

或者只是做...

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

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

相关文章：