如何使用 angularJS 在多个项目之间共享代码
Posted
技术标签:
【中文标题】如何使用 angularJS 在多个项目之间共享代码【英文标题】:How to share code between multiple projects with angularJS 【发布时间】:2015-05-14 05:00:01 【问题描述】:我想知道在多个 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"]);
实现这种方法。
那会是最好的方法吗?有什么替代方案?
【问题讨论】:
octoperf.com/blog/2019/08/22/… 【参考方案1】:您可以这样做,但如果您希望项目 1 和项目 2 使用两个不同版本的共享组件,这可能会让您头疼。想象一下,您需要发布带有最新共享组件的 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 是 Project 1 和 Project 2 中的 Bower 依赖项,则简单的 bower update
将为您提供任一项目中的最新版本。或者,您可以将项目锁定到特定版本的 Shared。
选项 3 似乎为您提供了最大的控制权,但您很快就会忘记您的项目正在使用哪个版本的 Shared。选项 1 解决了这个问题。
【讨论】:
假设我需要项目 1 和 2 中的共享组件始终是最新的,因为它们确实依赖于相同的代码库。在这种情况下,最好选择什么? 选项 1 可能仍然是最佳实践,但我很欣赏它如何添加可能被遗忘的步骤,从而导致代码不同步。您可以将上面的整个结构(项目和共享)放入单个存储库中。我不知道你是如何部署的,但我假设每个项目都是网站的根。您可以使用 gulp 1)将共享资产复制到项目中和/或 2)将共享资产编译(即,在 JS 的情况下合并和缩小)到项目中。基本上,gulp.src(SHARED_STUFF) ... DO_GULP_STUFF ... pipe(gulp.dest(PROJECT_DESTINATION))。【参考方案2】:另一个可能的选择是将您的共享代码发布为 npm 模块。如果代码是私有的,那么您可以使用npm Private Modules,尽管使用私有模块是有成本的。
使用 d.jamison 的回答中描述的这种方法或 Bower 方法,尝试根据其特定目的将您的模块分解为更小的模块,而不是使用大型的整体“AllOurSharedCode”模块。
这样做的好处是,如果您发现错误或进行改进,您可以更轻松地准确了解您的哪些项目可能会受到影响。 require
或 ES2015 import
语法在这方面也有很大帮助,就像你会说的那样,例如import calculateLineTotal from OrderLogic.js
,因此很容易找到代码中更改 calculateLineTotal
会影响的所有位置。
【讨论】:
【参考方案3】:或者干脆……
"dependencies" :
"shared-code" : "git://github.com/user/shared-code.git",
【讨论】:
您能解释一下如何在项目中使用它吗?【参考方案4】:另一种方法是为常用模块创建一个新的https://lerna.js.org/ 存储库,然后将它们发布到私有存储库以在您的其他项目中使用。
【讨论】:
以上是关于如何使用 angularJS 在多个项目之间共享代码的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS:为啥人们更喜欢工厂在控制器之间共享数据[重复]