web-dev-qa-db-ja.com

複数のプロジェクトでangularライブラリを共有する

私はangular 7+プロジェクトであり、バックエンド+フロントエンドで構成されています。今、フロントエンド+バックエンドで構成されるプロジェクトをもう1つ作成する必要があるという要件に直面しています。しかし、そこにはいくつかの再利用可能なフロントエンドコードが存在し、両方のアプリケーションで再利用できます。

私のPeoject構造

Here

要件

Here

だから私はライブラリの概念について読んだときに見つけることができました

1）2つのフロントエンドアプリケーションを作成し、共通のライブラリを共有します

私はasp.net angularで作成されたテンプレートプロジェクトを使用しているため、このアプローチを取ることはできません（- ここ に示すように）。2つのアプリケーション（Project OneとProject 2）独自のFE + BEがあるため、同じフォルダー内で2つのFEアプリケーションをグループ化して共有ライブラリを使用することはできません。

2）ライブラリを作成してnpmにアップロードし、依存関係として使用します

コードはプロプライエタリであり、ネットワーク外で共有できないため、このアプローチをとることはできません。また、企業のnpmを使用するためのローカルの企業のnpmレジストリはありません。

これはライブラリの概念を使用して実行できることを知っています。しかし、私はこれが複数のアプリケーションでどのように行われるかを理解していません。誰かがこの解決策を手伝ってくれるでしょうか。よろしくお願いします！

angularangular6angular7angular-builder
10
Vikhyath Maiya

OPで言及したディレクトリシナリオを考慮して、NPMドキュメントで言及されているように、ローカルパスを介してライブラリを追加できます。 Local Paths ：

_- Root
|
 -- Project One 
|
 -- Project Two
|
 -- Library usued across both projects
_

たとえばProject Oneの_package.json_では、ライブラリを依存関係として追加できます。

_"dependencies" : {
  "my-shared-library" : "file:../Library usued across both projects",
}
_

追伸ライブラリフォルダー名にスペースを使用できるかどうかはわかりませんが、試してみてください。しかし、私はあなたがとにかくスペースを使用しないと思います。

代替ソリューションと今後の計画

2）ライブラリを作成してnpmにアップロードし、依存関係として使用します。コードは独自仕様であり、ネットワーク外で共有できないため、この方法は使用できません。また、企業のnpmを使用するためのローカルの企業のnpmレジストリはありません。

正確ではありません。確かに、このアプローチを代替ソリューションとして使用することも、将来このライブラリを別のプロジェクトで使用できると考えている場合にも使用できます。 NPMのドキュメントで述べられているように、これを行う1つの方法があります： Git URLs as Dependencies 。

package.json

_"dependencies" : {
  "my-shared-library" : "Git repo address here. There are various ways to specify an address. See below.",
}
_

依存関係としてライブラリを追加する方法

  • このライブラリの新しいリポジトリを作成するとします。
_"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-shared-library.git",
}
_

このようにして、ライブラリの異なるバージョンを使用することもできます。 _4.2.0_用のライブラリの新しいバージョン（つまり、_Project One_）を開発していて、準備ができていない、または_Project Two_の_package.json_で_Project One_によって使用されるべきではないとしますSOMECODE）__次のように追加できます。

_"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-shared-library.git#branch-v4.2.0",
}
_
  • または、現在のリポジトリ内に新しいブランチ、たとえば_branch-for-my-shared-library_を作成できます（Project OneとProject Twoの両方がこの同じリポジトリにプッシュされると仮定します）：
_"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-current-project.git#branch-for-my-shared-library",
}
_

また、ドキュメントに記載されているように、URLで指定できるプロトコルがいくつかあることに注意してください。

プロトコルは、git、git + ssh、git + http、git + https、またはgit + fileのいずれかです。

その他のメモ：

ハッピーコーディング。

3
user6576367

npm link を使用できます。

パッケージフォルダー内のnpmリンクは、グローバルフォルダー{prefix}/lib/node_modules /にシンボリックリンクを作成し、npm linkコマンドが実行されたパッケージにリンクします。

まもなく、ライブラリフォルダーに移動して次のように入力すれば十分です。

npm link

次に、ライブラリを使用するプロジェクトに移動して、次のように入力します。

npm link <project-name>

ここで、<project-name>はpackage.jsonファイル内に存在する名前です。

これで十分でしょう。ソースコードをコピーして貼り付けずにネットワークでライブラリを共有したい場合は、プライベートリポジトリに料金を支払うように会社に依頼する方がよいでしょう。

1
Cristian Traìna

1）。ライブラリにnpmパックを使用してみてください。

"scripts": {
   ...
   "build_lib": "ng build --prod example-lib",
   "npm_pack": "cd dist/example-lib && npm pack",
   "package": "npm run build_lib && npm run npm_pack"
}

2）「npm pack」を実行すると、生成されたファイルは次のようになります：example-lib-0.0.1.tgz

3）次を使用して他のプロジェクトからインストールできます：npm install ../{some-paths}/example-lib/dist/example-lib/example-lib-0.0.1.tgz

詳しくはこちらをご覧ください： https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

1
katwhocodes