web-dev-qa-db-ja.com

angularJSで複数のプロジェクト間でコードを共有する方法

複数のangularJSプロジェクト間で共通のライブラリと独自のモジュールを共有するためのベストプラクティスは何だろうと思っていました。

2つの異なるプロジェクトに取り組んでいると仮定しましょう。どちらもangularJS、bootstrapなどのライブラリに依存しています。

以下のようなファイル構造があります。

  • プロジェクト1
    • index.html
    • cSS
    • js
      • モジュールA
      • モジュールB
    • lib
      • angular
      • bootstrap
  • プロジェクト2
    • index.html
    • cSS
    • js
      • モジュールB
      • モジュールX
    • lib
      • angular
      • bootstrap

それで、すべての共有コンポーネントを含む別のディレクトリを作成して、sthを取得することを考えていました。お気に入り：

  • 共有
    • angular
    • bootstrap
    • モジュール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"]);

このアプローチを達成するため。

それが最善の方法でしょうか？代わりになるものは何ですか？

javascriptangularjsmoduleshared-libraries
18
Fidel90

そのようにできますが、プロジェクト1とプロジェクト2で2つの異なるバージョンの共有コンポーネントを使用したい場合は、頭痛の種になるかもしれません。最新の共有コンポーネントを使用してプロジェクト1をリリースする必要があるが、プロジェクト2は以前のバージョンの共有コンポーネントに依存しているとします。なんてめちゃくちゃ。他のいくつかのオプション：

  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 を参照）

2番目のオプションには多くの可動部分があり、アプリケーションへの変更が必要です。言うまでもなく、各プロジェクトで異なるバージョンの共有コードをデプロイすることはできません。 1つ目は、プロジェクト1、プロジェクト2、共有の3つのリポジトリに簡単にスライスできるという利点があります。 SharedがProject 1とProject 2のBower依存関係である場合、単純なbower updateは、いずれかのプロジェクトの最新バージョンを取得します。または、プロジェクトを特定のバージョンの共有にロックすることもできます。

オプション3は、ほとんどの制御を提供するように見えますが、プロジェクトが使用しているSharedのバージョンをすぐに把握できなくなります。オプション1はそれを解決します。

16
d.jamison

別の潜在的なオプションは、共有コードをnpmモジュールとして公開することです。コードがプライベートの場合、プライベートモジュールを使用するとコストがかかりますが、 npm Private Modules を使用できます。

これまたはd.jamisonの回答で説明されているBowerアプローチのいずれかを使用して、大きなモノリシックな「AllOurSharedCode」モジュールではなく、特定の目的に基づいてモジュールを小さなモジュールに分割しようとします。

その利点は、バグを見つけた場合、または改善を行った場合、どのプロジェクトが影響を受けているかをより簡単に正確に確認できることです。 requireまたはES2015 import構文は、たとえば、 import { calculateLineTotal } from OrderLogic.jsなので、calculateLineTotalへの変更が影響するコード内のすべての場所を見つけるのは簡単です。

6
tomRedox

または単に...

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