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

How to share code between multiple projects with angularJS

提问by Fidel90

I was wondering what would be the best practice to share common libraries and own modules between multiple angularJS projects.

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

Let's assume that I'm working on two different projects. Both rely on libraries like angularJS, bootstrap etc.

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

I have a file structure like below:

我有一个像下面这样的文件结构：

• 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

• 项目一
  • 索引.html
  • css
  • js
    • 模块A
    • 模块B
  • 库
    • 有角的
    • 引导程序
• 项目二
  • 索引.html
  • css
  • js
    • 模块B
    • 模块 X
  • 库
    • 有角的
    • 引导程序

So I was thinking about just creating another directory with all the shared components so that I get sth. like:

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

• Shared
  • angular
  • bootstrap
  • module B
• Project 1
  • index.html
  • css
  • js
    • module A
• Project 2
  • index.html
  • css
  • js
    • module X

• 共享
  • 有角的
  • 引导程序
  • 模块B
• 项目一
  • 索引.html
  • css
  • js
    • 模块A
• 项目二
  • 索引.html
  • css
  • js
    • 模块 X

I have module B written like:

我有模块 B 写成：

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

and would then include it in my Project 1/2 as dependency like:

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

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

to achieve this approach.

来实现这种方法。

Would that be the best way? What could be an alternative?

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

采纳答案by d.jamison

You can do it that way, but it may give you headaches if you ever want Project 1 and Project 2 to use two different versions of the Shared components. Imagine that you need to release Project 1 with the latest shared components, but Project 2 still relies on a previous version of the shared components. What a mess. Some other options:

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

1. Make the shared components Bower components that could be included into either project as dependencies (see http://briantford.com/blog/angular-bower)
2. Compile all shared assets into a mutually accessible URL (see https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85)
3. Basically copy/paste components between projects, either manually or using something like gulp (see https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ)

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）

The second option has a lot of moving parts and requires changes to your applications, not to mention the inability to deploy different versions of the shared code in each project. The first has the benefit of being easy to slice into 3 repositories: Project 1, Project 2, and Shared. If Shared is a Bower dependency in Project 1 and Project 2, a simple bower updatewill get you the latest version in either project. Or you can lock a project to particular versions of Shared.

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

Option 3 seems like it gives you the most control, but you will quickly lose track of which version of Shared your project is using. Option 1 solves that.

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

回答by tomRedox

Another potential option is to publish your shared code as npm modules. If the code is private then you can use npm Private Modulesfor that, although there is a cost for using private modules.

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

With either this or the Bower approach described in d.jamison's answer try to break your modules into smaller modules based on their specific purposes, rather than having big monolithic "AllOurSharedCode" modules.

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

The benefit of that is that if you find a bug, or make an improvement, you can see more easily exactly which of your projects may be affected. The requireor ES2015 importsyntax help a lot with that too as you will be saying e.g. import { calculateLineTotal } from OrderLogic.js, so it is then trivial to find all of the places in code that a change to the calculateLineTotalwould impact.

这样做的好处是，如果您发现错误或进行改进，您可以更轻松地查看您的哪些项目可能受到影响。该require或ES2015import语法有很大的帮助与太，你会说例如import { calculateLineTotal } from OrderLogic.js，所以它是那么微不足道找到所有的代码更改了的地方calculateLineTotal会产生影响。

回答by Oliver Caine

Or just do...

或者只是做...

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