ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

2 つの強力なノード パッケージ マネージャー: npm と Yarn を学習します。

著者：Eve Cole 更新時間：2023-04-04 10:39:22

この記事では、Node.js の 2 つの強力なパッケージ マネージャー、npm と Yarn について説明します。お役に立てれば幸いです。


6306e547ba2a5383.jpg


Node.js クイック入門コース: 学習するために入力してください

Node学習するための最初のステップは、ノードのパッケージ マネージャーであるnpm理解することです。npm npmパッケージ リソースのダウンロードによく使用されるため、誰もがよく知っていると思います。

ただし、 npmのリソースライブラリ(https://www.npmjs.com/)が海外にあるため、それを利用したリソースのダウンロード速度が比較的遅いため、 yarnや国産などのサードパーティのnode包管理器npmと同期しています。倉庫を更新しました。タオバオ ミラー (cnpm)

次はこれらの内容を詳しく学習していきます。始めましょう!

Nodeシリーズコラムの更新を開始しました。ブロガーをフォローしてコラムを購読し、迷わずにNodeを学びましょう。

1.npmの使用

npmとは何ですか

npm使用する前に、まずnpmとは何かを理解する必要があります。Node シリーズ コラム [Node.js | フロントエンドからフル スタックへの唯一の方法] の最初の記事では、 npmがNodeのオープン ソース ウェアハウスであると述べられています。世界最大のオープンソース ウェアハウスです。

このウェアハウスのアドレスは: https://www.npmjs.com/

2020 年 3 月 17 日の時点で、 npm約1,200 万人の開発者に130 万個のパッケージを提供し、開発者は月間750 億回ダウンロードしました。

npmウェアハウス内のリソースをダウンロードして使用するには、 npm的指令( npm i axios download axiosなど、 npmで始まる) を使用するか、yarn などの他のサードパーティ命令 (サードパーティのNode包管理器) を使用できます。 。

公式声明: npm NodeJSのパッケージ管理および配布ツールです

パッケージ管理は、さまざまなNodeJSソフトウェア パッケージを保存および管理するNodeJSウェアハウスであるという事実に反映されています。

配布ツールは、 npmウェアハウスにパッケージをダウンロードするためのnpm的指令使用して具体化されます。

NodeJS環境を構成すると、 npm指令模块NodeJSとともにインストールされます。ターミナルからnpm -v実行して、インストールされているバージョンを確認できます。


ここに画像の説明を挿入します


ただし、デフォルトでインストールされているnpmバージョンが古すぎる場合は、 npm を自分で手動でインストールして更新することもできます。

 npm i npm@latest -g

@latest最新バージョンのインストールを表し、 -gグローバル インストールを表します。これらのnpm手順については後で説明します。

npmを使用してnpmインストールしています。自分でインストールできますか?

これは実際には簡単に理解できます。npm npm的指令模块もパッケージとしてnpm npmハウスに保存されており、このパッケージの名前はnpmです。

https://www.npmjs.com/package/npm


ここに画像の説明を挿入します


したがって、一般に npm と呼ばれるものは、単に npm のコマンド モジュール (npm という名前のパッケージ) を指します。

しかし実際には、 npmという単語はnpm指令模块を指し、また、 NodeJSオープン ソース ウェアハウス自体であるnpmも指します。そのため、 npm npmでダウンロードします (この npm は NodeJS のオープン ソース ウェアハウスを表します) (この npm はオープン ソース ウェアハウスを表します) npm という名前のソース ウェアハウス このパッケージ、このパッケージは npm のコマンド モジュールです)

npmの共通コマンド

npm命令は多数ありますが、ここでは一般的に使用される命令のみをリストします。詳細については、npm の公式ドキュメントを参照してください。

  • ここに画像の説明を挿入します npm init : package.jsonを生成します



  • npm install : package.jsonに記録されているすべてのリソースをダウンロードします

  • npm install 包名: 指定したパッケージを現在のディレクトリにダウンロードします

  • npm uninstall 包名: 現在のディレクトリにある指定されたパッケージをアンインストールします

  • npm update 包名: 現在のディレクトリ内の指定されたパッケージを更新します。パッケージ名が追加されていない場合は、現在のディレクトリ内のすべてのパッケージが更新されます。

  • npm outdated 包名:現在のディレクトリ内の指定されたパッケージが古いかどうかを確認します。パッケージ名が追加されていない場合は、現在のディレクトリ内のすべてのパッケージが確認されます。

  • npm info 包名: 現在のディレクトリにあるパッケージの詳細情報を取得します

  • npm list :現在のディレクトリにインストールされているすべてのパッケージとその依存関係を表示し、バージョン番号を表示します ( list lsと省略できます)

  • npm list 包名: 現在のディレクトリにインストールされている指定されたパッケージのバージョン番号を表示します( list lsと省略できます)

追加のポイント:

  1. install 、次のようにiと省略できます。 npm install axios npm i axiosと省略できます。

  2. uninstall unと省略できます。

  3. パッケージ名の後に@記号を追加して、パッケージのバージョンを指定します。たとえば、 npm i md5@1 md5 のバージョン 1 をダウンロードし、 npm i md5@latest md5 の最新バージョンをダウンロードすることを意味します。

npmコマンドサフィックス

  • -g :グローバル環境を指定します

    npmコマンドはデフォルトで現在のディレクトリで動作します。 -gを追加すると、グローバル環境で動作するように指定されますnpm i npm@latest -gのように、npm をどのディレクトリでも使用できるようにします。 。

  • --save -sと省略できます。運用環境での依存関係を指定します ( dependenciesに記録されます)。

    npm5バージョン以降、デフォルトは--saveです。たとえば、axios は実稼働環境と開発環境の両方にインストールする必要があります: npm i axios -s

  • --save-dev -Dと省略できます。開発環境の依存関係を指定します ( devDependenciesに記録されます)。

    本番環境では必要のない babel をインストールするには (開発環境でのみ使用されます): npm i babel -D

  • --save-prod -Pと省略できます。 --saveと同じです

  • --save-optional -Oと省略できます。オプションの依存関係を指定します ( optionalDependenciesに記録されます)。

  • --no-save : package.jsonには記録されません

-g，--save，--save-dev私の記事「npm install -g/–save/–save-dev の違い」を参照してください。

npm コマンドのサフィックスはnpm i -g npm@latestのようにパッケージ名の前に置くこともできます。

依存関係パッケージの管理

npmでは、よく知られている依存関係は、 dependenciesとdevDependenciesです。

さらに、実際には次のものが含まれます。

  • peerDependencies 、

  • optionalDependencies

  • bundledDependencies / bundleDependencies

これらを含むいくつかの依存関係がpackage.jsonに記録されます。


ここに画像の説明を挿入します


上で、 npm コマンドのサフィックスについて説明したときに、これらの依存関係について説明しました。これらの依存関係が何を表すかについて詳しく説明します。

dependenciesとdevDependencies

私の他の記事をチェックしてください: npm install -g/–save/–save-dev の違い

peerDependencies

偉人による記事をチェックしてください: 1 つの記事でピア依存関係を理解する

optionalDependencies

オプションの依存関係。インストールが失敗した場合でも実行できる依存パッケージがいくつかある場合、または npm を実行し続けたい場合は、 optionalDependencies使用できます。また、 optionalDependencies dependencies内の同じ名前の依存関係を上書きするため、使用しないでください。両方の場所に書きます。

bundledDependencies / bundleDependencies

依存関係のパッケージ化bundledDependenciesは、依存パッケージ名を含む配列オブジェクトです。公開する場合、このオブジェクト内のパッケージは、最初にdevDependenciesまたはdependenciesで宣言する必要があります。そうしないと、パッケージ化によってエラーが報告されます。エラー。

package.json で注意が必要なパッケージ バージョンの問題

npmを通じてダウンロードされたすべてのパッケージのバージョン情報はpackage.jsonに記録されます。

npm i package.jsonに記録されたパッケージ情報に基づいてダウンロードされます。そのダウンロード ルールは次のとおりです。

  • パッケージのバージョンが^ (デフォルト) で始まる場合、大きいバージョンはロックされます

    // パッケージ.json
"依存関係": {
"md5": "^2.1.0" // } ^ で始まり、

    npm i md5 2.xxの最新バージョン (2 つのメジャー バージョンの最新バージョン) がインストールされます。これは必ずしも 2.1.0 である必要はなく、2.3.0 である場合もあります。

  • パッケージのバージョンが~で始まる場合、 2 番目のメジャー バージョンにロックされます

    // パッケージ.json
"依存関係": {
"md5": "~2.1.0"
}、

    npm iを介して、 md5 2.1.xの最新バージョン (バージョン 2.1 の下の最新バージョン) をインストールします。これは必ずしも 2.1.0 である必要はありませんが、2.1.1 である場合もあります。

  • パッケージのバージョンは*であり、最新バージョンにロックされます

    // パッケージ.json
"依存関係": {
"md5": "*"
}、

    npm i経由で最新バージョンのmd5をインストールします

  • パッケージ version の前にプレフィックスがない場合は、指定されたバージョンにロックされます。

     // パッケージ.json
"依存関係": {
"md5": "2.1.0"
}、

    npm i経由でmd5のバージョン 2.1.0 をインストールします

npm速度が遅い問題を解決する

npmウェアハウスは海外にあるため、中国でnpmコマンドを使用してこの海外ウェアハウスのコンテンツをダウンロードすると時間がかかります。

現時点では、次のコマンドを実行して、 npmウェアハウスのソースを国内の淘宝網イメージ (cnpm)のソースに切り替えることができます。

 npm 設定レジストリ https://registry.npmmirror.com

npm config get registry使用して現在のソースを表示します。

ここに画像の説明を挿入します


将来的にnpm使用する場合、国内のタオバオミラー倉庫から自動的にダウンロードされ、速度は非常に高速になります。

タオバオ ミラーの以前のソース アドレスは http://registry.npm.taabao.org でしたが、現在は http://registry.npmmirror.com に変更されています。

ただし、 npm構成を変更してソースを切り替えるのは必然的に少し面倒になりますnrmグローバルにインストールすると、 npmソースをすばやく切り替えることができます。

nrm を使用して npm ソースをすばやく切り替える

nrm をグローバルにインストールします。

 npm install -g nrm

nrm ls実行して、切り替え可能な npm ソースを表示します。


ここに画像の説明を挿入します


npm use使用してソースを切り替える（タオバオソースに切り替えるなど）: nrm use taobao


ここに画像の説明を挿入します


nrm test 源名を使用して、対応するソースの応答時間をテストします。


ここに画像の説明を挿入します


Taobao ソースの応答速度がnpmのデフォルト ソースよりもはるかに速いことがわかります。

中国語の npm ミラー: cnpm

cnpm完全なnpmjs.org ミラーであり、公式バージョンの代わりに使用できます。

cnpmと正式版との同期頻度は10分に1回、cnpm公式サイト

cnpmをダウンロード:

 npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm はタオバオ ミラーです。上記のタオバオ ミラーソースを使用するときは、 npmのソースをタオバオ ミラーのソース ( cnpm ) (このソースは実際には倉庫のアドレスを参照します) に変更して、それを使用します。 npmコマンド。

ここでは、 cnpmの完全なイメージを直接ダウンロードします。そうすれば、 npmコマンドの代わりにcnpmコマンドを使用できます。

 cnpm installcnpm i axios -g

// ....

cnpmの手順はnpmの手順とまったく同じです。使用する場合はnpm の代わりに cnpm を使用してください。

2.糸の使用

Yarn は Facebook によってリリースされた依存関係管理ツールで、 npmよりも高速かつ効率的です。

インストール：

 npm install -g 糸

糸を更新します:

糸セットの最新バージョン
ソースからの糸セットのバージョン

アドバンテージ

  • 超高速
    yarnダウンロードされた各パッケージをキャッシュするため、再度使用するときに再度ダウンロードする必要はありません。 また、並列ダウンロードを利用してリソース使用率を最大化するため、インストールが高速化されます。

  • 非常に安全<br/> コードを実行する前に、 yarnアルゴリズムを通じて各インストール パッケージの整合性を検証します。

糸の共通説明書


ここに画像の説明を挿入します

  • yarn init : プロジェクトを初期化し、 package.jsonファイルを生成します。生成手順はnpm init

  • yarn help ：コマンド一覧表示

  • yarn install : package.jsonに記録されているすべてのリソースをダウンロードします。yarn と省略できますyarn

  • yarn add 包名: 指定されたパッケージを現在のディレクトリにダウンロードします

  • yarn remove 包名: 現在のディレクトリにある指定されたパッケージをアンインストールします

  • yarn upgrade 包名: 現在のディレクトリ内の指定されたパッケージを更新します。パッケージ名の後に@指定版本号を追加して、更新する必要があるバージョンを指定できます。

yarnコマンド接尾辞

  • --dev :開発環境での依存関係を指定します ( devDependencies )。- -Dと省略されます。

  • --peer :コアの依存関係を指定します ( peerDependencies )

  • --optional :オプションの依存関係を指定します ( optionalDependencies )

結論

この記事では、 npmとyarn 、および npm から派生したnrm 、 cnpmなどを紹介します。

ブロガーは、 npm + nrm の組み合わせを使用してソースを切り替えています。これにより、高速な速度が保証されるだけでなく、 cnpmやyarn

npmとyarnは両方とも多くの内容が含まれています。この記事では、最もよく使用される内容についてのみ説明します。詳しく知りたい場合は、対応する公式 Web サイトにアクセスしてください。

関連記事