複数のパッケージソースから同時にパッケージをロードするようにnpmを設定する方法

フロントエンドとバックエンドの分離技術の発展と成熟に伴い、ますます多くのバックエンドシステム、さらにはフロントエンドシステムでもフロントエンドとバックエンドの分離方式が採用されています。大規模なフロントエンドとバックエンドの分離システムでは、フロントエンドにサードパーティの js パッケージへの参照が大量に含まれ、各サードパーティパッケージが別のサードパーティパッケージに依存している可能性があります。そのため、プロジェクトパッケージ間の依存関係を管理するためのツールが緊急に必要とされています。このとき、npm が登場します。npm は通常、nodejs と一緒にインストールされます。

プロジェクトでは、一部の js パッケージが社内にカプセル化されている可能性があり、これらのパッケージには一部の個人情報が含まれている可能性があるため、npm のパブリックリポジトリにアップロードできないという状況がよくあります。この場合、セキュリティを確保するために、社内にカプセル化されたこれらの js パッケージを社内に構築されたリポジトリに配置することが良い方法です。通常、verdaccio をインストールすることで、社内の npm パッケージリポジトリソースを構築できます。構築が完了したら、社内にカプセル化された js パッケージを社内のプライベートリポジトリソースにアップロードし、パッケージの読み込みを初期化するときに npm が複数のリポジトリソースからパッケージを検索するように設定することで、npm が複数のリポジトリソースから同時にパッケージを読み込む機能を実現します。

1. ローカルストレージを構築する

まず次のコマンドを入力します:

npm インストール -g verdaccio --save

プライベート npm パッケージリポジトリを構築するためのツールをインストールするには、このコマンドを実行する前に nodejs をインストールする必要があることに注意してください。

インストールが成功すると、次の図が表示されます。

インストールが成功したら、Windowsシステムの場合は、verdaccio構成ファイルconfig.yamlが%APPDATA%/Roaming/verdaccioディレクトリに見つかります。また、コマンドラインウィンドウで実行することもできます。

verdaccio コマンドを入力して verdaccio を起動します。起動に成功したら、ブラウザに http://127.0.0.1:4873/ と入力すると、次の結果が表示されます。

まだプライベートパッケージをアップロードしていないため、空のリストが表示されます。以下では、プライベートパッケージを verdaccio に公開する方法について説明します。

2. npmパッケージを作成し、プライベートリポジトリにアップロードする

まず、テスト npm パッケージを作成し、それをプライベートリポジトリにアップロードします。

npm init コマンドを使用してパッケージを作成します。

作成が成功したら、Test ディレクトリを開くと、package.json ファイルが生成されていることがわかります。新しく追加された publishConfig ノードを開いて、このパッケージをアドレス http://127.0.0.1:4873 に公開します。

{
  "名前": "@mylib/test",
  "バージョン": "1.0.0",
  "説明": "npm ローカル パッケージ",
  "メイン": "index.js",
  「スクリプト」: {
    "test": "echo \"エラー: テストが指定されていません\" && exit 1"
  },
  「キーワード」: [
    "テスト"
  ]、
  "著者": "チェンシン",
  「ライセンス」: 「ISC」、
  「公開構成」: {
    "レジストリ": "http://127.0.0.1:4873"
  }
}

package.json があるディレクトリに新しい index.js ファイルを作成します。上記の main 属性では、パッケージのエントリ実行ファイルとして index.js を指定しているため、名前は index.js にする必要があります。

verdaccio 構成ファイルで、パッケージの公開と非公開にはログインが必要であることを指定したため、次のコマンドを入力してユーザーを登録します。

上記は登録が成功し、ログインが完了したことを意味します。現在のディレクトリはまさに @mylib/test パッケージの package.json ファイルがあるディレクトリであり、package.json ファイルにはパッケージを公開するリポジトリのアドレスが指定されているため、npm publish コマンドを使用して直接 @mylib/test パッケージをプライベートリポジトリに公開できます。公開が成功すると、次の図のようになります。

3. npmインストールパッケージを設定するときに複数のリポジトリから検索する

次のコマンドを入力します:

npm config で @mylib:registry=http://127.0.0.1:4873 を設定します

上記のコマンドは、npm に http://127.0.0.1:4873 から @mylib で始まるすべてのパッケージをロードするように指示します。

4. npmが複数のリポジトリから同時にパッケージをロードできるかどうかをテストする

プロジェクトのpackage.jsonファイルを作成するには、npm initコマンドを入力します。

次の 2 つのコマンドを入力して、それぞれ jquery パッケージと @mylib/test パッケージをインストールします。jquery パッケージは外部リポジトリソースからロードされます。

npm インストール jquery --save
npm をインストール @mylib/test --save

この時点で、node_modulesには上記でインストールされた2つのパッケージがすでに含まれていることが分かります。

package.jsonには、上記の2つのパッケージの依存関係も含まれています。

{
  "名前": "テストプロジェクト",
  "バージョン": "1.0.0",
  "説明": "テストプロジェクト",
  "メイン": "index.js",
  「スクリプト」: {
    "test": "echo \"エラー: テストが指定されていません\" && exit 1"
  },
  「キーワード」: [
    "テスト"
  ]、
  "著者": "チェンシン",
  「ライセンス」: 「ISC」、
  「依存関係」: {
    "@mylib/test": "^1.0.0",
    "jQuery": "^3.6.0"
  }
}

この時点で、node_modules ディレクトリを削除し、コマンドラインを入力します (このコマンドは、package.json が配置されているディレクトリで実行する必要があります)。

npm 初期化

node_modules ディレクトリが再生成され、package.json に含まれる 2 つのパッケージが含まれているかどうかを確認します。両方が含まれている場合、npm が複数のリポジトリからのパッケージの同時読み込みをすでにサポートしていることを意味します。

これで、npm を設定して複数のパッケージソースから同時にパッケージをロードする方法についての記事は終了です。npm を設定して複数のパッケージソースから同時にパッケージをロードする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: