パッケージ管理ツール npm、yarn、cnpm、npx、pnpm (2023) の詳細説明

1. パッケージ管理ツール npm

(1) パッケージ管理ツール npm:

• ノード パッケージ マネージャー。ノード パッケージ マネージャーです。
• しかし今では、Node パッケージ マネージャーだけでなく、フロントエンド プロジェクトの依存パッケージの管理にも使用しています。
• vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack など。

(2) npm ツールをダウンロードしてインストールするにはどうすればよいですか?

• npm はノードの管理ツールなので、最初にノードをインストールする必要があります。
• ノード管理ツール: https://nodejs.org/en/、ノードのインストールプロセスでは、npm ツールが自動的にインストールされます。

(3) npm で管理されているパッケージはどこで表示、検索できますか?

• https://www.npmjs.org/
• これは、関連する npm パッケージをインストールする公式 Web サイトです。

(4) npmで管理しているパッケージはどこに保存されているのでしょうか？

• 私たちは独自のパッケージをレジストリに公開します。
• パッケージをインストールするとき、それは実際にはレジストリからダウンロードされたパッケージです。

2.npm設定ファイル

では、プロジェクトの場合、npm を使用して非常に多くのパッケージを管理するにはどうすればよいでしょうか?

• 実際、フロントエンド プロジェクト (Vue、React) であってもバックエンド プロジェクト (Node) であっても、各プロジェクトには対応する構成ファイルがあります。
• この構成ファイルには、プロジェクト名、バージョン番号、プロジェクトの説明などが記録されます。
• また、プロジェクトが依存する他のライブラリの情報と、依存するライブラリのバージョン番号も記録されます。

この設定ファイルは package.json です

では、この設定ファイルを取得するにはどうすればよいでしょうか?

• 方法 1: プロジェクトをゼロから手動で作成する (npm init –y)
• 方法 2: スキャフォールディングを通じてプロジェクトを作成します。これは、package.json の生成に役立ちます。その中に関連する構成が含まれています。

3. 共通設定ファイル

• npm init # 作成時に情報を入力
• npm init -y # すべての情報にデフォルトを使用します

Vue CLI4 で作成された Vue3 プロジェクト 

 

create-react-app によって作成された React17 プロジェクト 

 

4. 共通の属性

必須属性: 名前、バージョン

• name はプロジェクトの名前です。
• version は現在のプロジェクトのバージョン番号です。
• description は説明的な情報であり、プロジェクトの基本的な説明としてよく使用されます。
• author は、著者の関連情報です (出版時に使用されます)。
• ライセンスはオープンソース プロトコルです (公開時に使用されます)。

プライベート属性:

• private 属性は、現在のプロジェクトがプライベートかどうかを記録します。
• 値が true の場合、npm はその値を公開できません。これは、プライベート プロジェクトまたはモジュールが公開されないようにする方法です。

主な属性:

プログラムのエントリーポイントを設定します。

• たとえば、axios モジュール const axios = require('axios'); を使用します。
• main 属性がある場合、実際には対応する main 属性を見つけてファイルを見つけます。

スクリプト属性

• script 属性は、キーと値のペアの形式で存在するいくつかのスクリプト コマンドを構成するために使用されます。
• 構成後、npm run コマンドのキーを使用してこのコマンドを実行できます。
• npm start と npm run start の違いは何ですか?

           1. これらは同等です;
            2. 一般的に使用される開始、テスト、停止、および再起動については、run を省略し、npm start を通じて直接実行できます。

依存関係プロパティ

• dependency 属性は、開発環境または運用環境に関係なく、依存する必要があるパッケージを指定します。
• 通常、プロジェクトの実際の開発では、vue、vuex、vue-router、react、react-dom、axios などのライブラリ モジュールが使用されます。
• これに対応するのが devDependency です。

devDependency プロパティ

• webpack、babel など、一部のパッケージは運用環境では必要ありません。
• この時点では、npm install webpack --save-dev; を通じて devDependency プロパティにインストールします。

ピアDependency プロパティ

• プロジェクトの依存関係のもう 1 つはピアツーピア依存関係です。つまり、依存するパッケージは別のホスト パッケージに基づいている必要があります。
• たとえば、element-plus は vue3 に依存し、ant の設計は React と React-dom に依存します。

5. 依存バージョン管理

インストールされている依存関係のバージョンが ^2.0.3 または ~2.0.3 と表示されます。これは何を意味しますか?

Npm パッケージは通常、semver バージョン仕様に準拠する必要があります。

• semver：https://semver.org/lang/zh-CN/
• npm semver：https://docs.npmjs.com/misc/semver

サーバーのバージョン仕様は XYZ です。

• X メジャー バージョン番号 (メジャー): 互換性のない API 変更を行った場合 (以前のバージョンと互換性がない可能性があります)。
• Y マイナー バージョン番号 (マイナー): 下位互換性のある機能追加を行う場合 (新しい機能が追加されますが、以前のバージョンと互換性があります)。
• Z リビジョン番号 (パッチ): 下位互換性の問題修正を行う場合 (新しい機能はなく、以前のバージョンのバグを修正します)。

ここで ^ と ~ の違いを説明します。

• xyz: 明確なバージョン番号を示します。
• ^xyz: x は変更されず、y と z は常に最新バージョンをインストールすることを示します。
• ~xyz: x と y は変更されず、z は常に最新バージョンをインストールすることを示します。

6. 共通の属性

エンジン属性

• エンジン属性は、ノードと NPM のバージョン番号を指定するために使用されます。
• インストール プロセス中に、対応するエンジンのバージョンが最初にチェックされ、一致しない場合はエラーが報告されます。
• 実際、オペレーティング システム "os": [ "darwin", "linux" ] を指定することもできますが、これはほとんど使用されません。

ブラウザリスト属性

• これは、パッケージ化された JavaScript ブラウザの互換性を構成するために使用されます。を参照してください。
• それ以外の場合は、特定の構文をサポートするために手動でポリフィルを追加する必要があります。
• つまり、これは webpack などのパッケージ化ツールに役立つ属性です (ここでは webpack などのツールの動作原理の詳細な説明はありませんので、これ以上の詳細は説明しません)。

7.npm installコマンド

npm パッケージをインストールするには 2 つの状況があります。

• グローバル インストール (グローバル インストール): npm install webpack -g
• プロジェクト (部分) インストール (ローカル インストール): npm install webpack

グローバルインストール

• グローバル インストールでは、パッケージをグローバルに直接インストールします。
• たとえば、yarn をグローバルにインストールします: npm installyarn -g

しかし、多くの人がグローバル インストールについていくつかの誤解を持っています。

• 通常、npm を使用してグローバルにインストールされるパッケージは、yarn、webpack などのいくつかのツールキットです。
• これは、axios、express、koa などのライブラリ ファイルとは異なります。
• したがって、グローバル インストールでは、すべてのプロジェクトで axios などのライブラリを使用できるわけではありません。

8. プロジェクトのインストール

• プロジェクトのインストールにより、現在のディレクトリに node_modules フォルダーが生成されます。検索順序が必要であることを説明したときに、パッケージがどのような状況で検索されるかについて説明しました。
• 部分インストールは、開発時の依存関係と運用時の依存関係に分けられます。

# デフォルトのインストールの開発および運用の依存関係
npm install axios
npm i axios

# 開発は
npm install webpack --save-dev npm install webpack -D
npm i webpack –Dに依存します

# package.jsonの依存パッケージによる

npmインストール

9. npm installの原理

多くの学生は npm install <package> について以前に知っていたはずですが、その内部原理について考えたことはありますか?

• npm install は舞台裏で何を行うのに役立ちますか?
• package-lock.json という別のファイルがあることがわかりますが、その機能は何ですか?
• npm5 以降、npm はキャッシュ戦略 (糸からの圧力) をサポートしていますが、キャッシュの役割は何ですか?

これは、npm install に基づいて私が描いた概略図です。

npm install は、package-lock.json ファイルがあるかどうかを検出します。

ロックファイルがありません

1. 依存関係を分析します。他のパッケージに依存している可能性があり、複数のパッケージ間で同じ依存関係が発生する可能性があるためです。
2. 圧縮パッケージをレジストリ ウェアハウスからダウンロードします (ミラーを設定する場合、圧縮パッケージはミラー サーバーからダウンロードされます)。
3. 圧縮パッケージを取得した後、圧縮パッケージはキャッシュされます (npm5 以降)。
4. 圧縮パッケージをプロジェクトのnode_modulesフォルダーに解凍します。

ロックファイルがあります

• ロック内のパッケージのバージョンが package.json 内のバージョンと一致しているかどうかを検出します (サーバーのバージョン仕様に従って検出されます)。

矛盾がある場合、依存関係が再構築され、トップレベルのプロセスが直接実行されます。

• 整合性の場合、最初にキャッシュが検索されます

見つからない場合は、レジストリ ウェアハウスからダウンロードされ、最上位のプロセスに直接進みます。

• キャッシュ内の圧縮ファイルが見つかると、その圧縮ファイルが取得され、node_modules フォルダーに解凍されます。

10、パッケージロック.json

Package-lock.json ファイルの分析:

• 名前: プロジェクトの名前。
• バージョン: プロジェクトのバージョン。
• lockfileVersion: ロック ファイルのバージョン。
• Required: モジュールの依存関係を追跡するには、Requires を使用します。
• 依存関係: プロジェクトの依存関係
• 現在のプロジェクトは axios に依存していますが、axios はフォローリダイレクトに依存しています。
• axios の属性は次のとおりです。

                           1. version は、実際にインストールされている axios のバージョンを示します;
                           2. Resolved は、ダウンロード アドレスとレジストリ ウェアハウス内の場所を記録するために使用されます;
                           3. require/dependency は、現在のモジュールの依存関係を記録します;
                           4. integrity は、キャッシュからインデックスを取得し、インデックスを介して圧縮パッケージ ファイルを取得します。

11. その他のnpmコマンド

ここでは、より一般的に使用されるものをいくつか紹介します。

# 依存パッケージをアンインストールします:
npm uninstall package
npm uninstall package --save-dev npm uninstall package -D

# 再構築を強制する
npm再構築

＃ キャッシュの消去

npmキャッシュクリーン

実際には、npm コマンドがたくさんあります。

• https://docs.npmjs.com/cli-documentation/cli
• その他のコマンドについては、必要に応じて公式ドキュメントを参照してください。

12. 糸道具

別のノード パッケージ管理ツールの糸:

• Yarn は、Facebook、Google、Exponent、Tilde が共同で立ち上げた新しい JS パッケージ管理ツールです。
• Yarn は初期の npm のいくつかの欠陥を補っているように見えました。
• 初期の npm には、依存関係のインストールの遅さ、バージョン依存関係の混乱などの一連の問題など、多くの欠陥があります。
• npm5 バージョン以降、多くのアップグレードと改善が行われましたが、多くの人は依然として Yarn を使用することを好みます。

13.cnpmツール 

        特殊な理由により、https://registry.npmjs.org から必要なパッケージの一部をうまくダウンロードできない場合があります。

# npm ミラーを表示:
npm config レジストリを取得

# npm のミラーを直接設定できます:
npm config set registry https://registry.npm.taabao.org

しかし、ほとんどの人 (私など) は、npm イメージを変更したくありません。

• まず、npm が最初に公式パッケージからダウンロードしたチャネルを自由に変更したくありません。
• 第二に、いつかタオバオの鏡像が停止されるか維持されなくなり、再び変更しなければならなくなるのではないかと心配しています。

現時点では、cnpm を使用して、cnpm を淘宝網のミラーイメージとして設定できます。

npm install -g cnpm --registry=https://registry.npm.taabao.org

cnpm config レジストリを取得 # https://r.npm.taabao.org/

        将来的には、インストールでは npm ではなく cpm が直接使用されるようになります。たとえば、ネイティブの npm コマンドは npm install uniq --save、cnpm コマンドは cnpm install uniq --save となります。 

14.npxツール

npx は npm5.2 に付属のコマンドです。

npx には多くの関数がありますが、プロジェクト内の特定のモジュールの命令を呼び出すために使用することが一般的です。

webpack を例に挙げてみましょう。

• グローバルインストールはwebpack5.1.3です
• プロジェクトは webpack3.6.0 でインストールされます

ターミナルで webpack --version を実行する場合、どのコマンドを使用すればよいですか?

• 表示される結果は webpack 5.1.3 ですが、実際にはグローバルで使用されています。
• 理由は非常に単純で、現在のディレクトリに webpack が見つからない場合、グローバルに検索してコマンドを実行します。

この問題を解決するにはどうすればよいでしょうか?

   プロジェクト (部分) Webpack を使用するには、一般的な方法が 2 つあります。

• 方法 1: node_module の下で Webpack を明確に見つけます。
• 方法 2: Webpack を実行するスクリプトをスクリプト内に定義します。

方法 1: ターミナル (プロジェクトのルート ディレクトリ内) で次のコマンドを使用します
。/node_modules/.bin/webpack --version

方法 2: package.json 内のスクリプトを変更する

"scripts": {
    "webpack": "webpack --version"
}

方法 3: npx を使用する

npx webpack --version

npx の原理は非常に単純で、現在のディレクトリの node_modules/.bin ディレクトリで対応するコマンドを見つけます。

15.pnpmツール

15.1. pnpmとは何ですか?

pnpmとは何ですか? 公式の説明を見てみましょう。

pnpm: これは、performant npm の略称として理解できます。

どの企業がそれを使用していますか?

Vue を含む多くの企業やオープンソース プロジェクトのパッケージ管理ツールは pnpm に切り替わりました。

15.2. pnpm は具体的に何をするのですか? 

• npm または Yarn を使用する場合、100 個のプロジェクトがあり、そのすべてに同じ依存関係がある場合、同じ依存関係の 100 個のコピーをディスク上に保持する必要があります。
• pnpm を使用すると、依存パッケージは統一された場所に保存されるため、次のようになります。

• 同じ依存関係に同じバージョンを使用する場合、ディスク上にはその依存関係のファイルが 1 つだけ存在します。
• 同じ依存関係パッケージの異なるバージョンを使用する必要がある場合は、バージョン間で異なるファイルのみが保存されます。
• すべてのファイルはハード ドライブ上の統一された場所に保存されます。

                  パッケージをインストールするとき、パッケージに含まれるすべてのファイルは、追加のハード ディスク領域を占有することなく、この場所にハードリンクされます。
                  これにより、プロジェクト間で同じバージョンの依存関係パッケージを簡単に共有できます。

15.3. pnpm は非フラットな node_modules ディレクトリを作成します

       npm または Yarn Classic を使用して依存関係をインストールすると、すべてのパッケージが node_modules のルートに昇格されます。

その結果、ソース コードは、現在のプロジェクトによって設定されていない依存関係にアクセスできます。

15.4. pnpm のインストールと使用 

では、pnpm をインストールするにはどうすればよいでしょうか?

• 公式 Web サイトでは、pnpm をインストールするさまざまな方法が提供されています: https://www.pnpm.cn/installation
• Node がインストールされているため、Node には npm があり、npm を介してインストールできます。

npm install -g pnpm

すぐに使い始めるのに役立つ、npm と同等のコマンドとの比較表を次に示します。

npm コマンド	pnpm と 同等のコマンド
npmインストール	pnpmインストール
npm インストール <pkg>	pnpm add <pkg>
npm アンインストール <pkg>	pnpm 削除 <pkg>
npm run <cmd>	pnpm <cmd>

詳しいコマンドと使用法については、pnpm の公式 Web サイトを参照してください: https://pnpm.io/zh/

15.4、pnpmストレージストア

pnpm7.0 より前は、統合ストレージの場所は ~/.pnpm-score でした。

 

pnpm7.0 以降、統合ストレージの場所は <pnpm ホーム ディレクトリ>/store に変更されました。

• Linux の場合、デフォルトは ~/.local/share/pnpm/store です。
• Windows の場合: %LOCALAPPDATA%/pnpm/store
• macOS の場合: ~/Library/pnpm/store

いくつかの端末コマンドを使用してこのディレクトリを取得できます: 現在アクティブなストア ディレクトリを取得します。 

pnpm store path

———————————————
著作権に関する声明: この記事は CSDN ブロガー「Yaonan」のオリジナル記事であり、CC 4.0 BY-SA 著作権契約に従って、オリジナルのソースリンクとこれを添付してください。声明を転載するための記事。