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

【コンパイルと共有】フロントエンド開発に必要な共通npmコマンド

著者：Eve Cole 更新時間：2022-09-21 09:19:44
npm はノードのデフォルトのパッケージ管理ツールです。フロントエンド開発では、npm の一般的なコマンドを理解しておくと、問題を解決するのに役立ちます。次の記事では、一般的な npm の手順をいくつか紹介しますので、お役に立てれば幸いです。

フロントエンド (vue) マスタリーコースへのエントリー:

npm ソース設定を

学習するために入ります
  • 現在のソース構成をクエリします。
npm get registry
  • タオバオ ミラー ソースを設定します (タオバオ ミラーの新しいドメイン名)。
npm config set registry https://registry.npmmirror.com

old http://npm.taabao.org および http://registry.npm .taobao .org ドメイン名は 2022 年 5 月 31 日 0:00 よりサービスを終了します。したがって、古いコマンドは使用しないでください。
npm config set registry http://registry.npm.taabao.org

  • デフォルトのソースを復元
npm config set registry https://registry.npmjs.orgnrm を使用し
  • てソースを管理
# nrm をグローバルにインストール
npm install -g nrm
# nrm ソース リストを表示 (デフォルト ソース、タオバオ ソース、テンセント ソースなどをサポート)
NRMLS
# ソースの切り替え (ミラーソースの名前は nrm ls で確認できます)
nrm は、taobao を使用して
、プロジェクトのルート ディレクトリに .npmrc ファイルを追加します。

依存関係をインストールするための

  • Taobao ミラー アドレスの内容は
次の
とおりです。

  • グローバルインストール

#最新バージョンをインストール npm install -g xxx
 #指定されたバージョンをインストール npm install -g [email protected]
  • ローカルインストール (現在のフォルダー)
npm install xxx
  • プロジェクトはインストールに依存し、 package.jsonの依存関係に書き込みます:
npm install -S xxx 
# 上記と同じ効果、デフォルト:
npm install xxx
  • プロジェクトの依存関係がインストールされ、 package.jsonのdevDependencyに書き込まれます。
npm install –D xxx は
  • バージョン番号を指定します
。 
npm install [email protected]
  • プロジェクト このインストールの依存関係は一時的に淘宝ミラー
npm install --registry=https を使用します。 //registry.npmmirror.com は
  • 依存関係パッケージをインストールし (次のコマンドはバージョン @1.0.0 を指定します)、一時的に淘宝ミラーを使用します:
npm install [email protected] --registry=https://registry.npmmirror.com

リライをアンインストールするには

npm uninstall <package-name>

  • をアンインストールし

  • 、package.json から削除します。
    -S または --save フラグを使用すると、この操作により package.json ファイル内の参照も削除されます。
    パッケージが開発依存関係である場合 (package.json ファイルの devDependency にリストされている)、-D または --save-dev フラグを使用してファイルから削除する必要があります。
npm uninstall -S <パッケージ名>
npm uninstall -D <パッケージ名>
  • グローバル依存関係をアンインストールする
npm uninstall -g <パッケージ名>
  • プロンプト
    アンインストールのエイリアス:remove、rm、r、un、unlink はすべて npm uninstall のエイリアスです。
npm uninstall -S <パッケージ名>
# npm delete -S <package-name> と同等
# npm rm -S <package-name>

update

と同等
npm が古いことを

  • 更新するために最初にチェックします

ここに画像の説明を挿入します
赤色でマークされたパッケージは更新可能であり、黄色でマークされたパッケージは更新不可能です。

  • アップデートを実行します（メジャー バージョンではなく、パッチ バージョンまたはマイナー バージョンのみがアップデートされます）
    プライマリバージョンとセカンダリバージョンがわからない場合は、下にバージョン番号の説明がありますので、下にスクロールしてください。
npm update は
  • メイン バージョン
# 1 を更新します。「npm-check-updates」モジュールをインストールします。 npm install -g npm-check-updates  
# 2. 更新可能なモジュール ncu を確認する  
npm-チェック-アップデート  
# 上記 2 つのコマンドはどちらも更新可能なモジュールを確認できます。次に、package.json 依存関係パッケージを最新バージョンに更新します。  

#package.json ファイルの依存関係と devDependency 内のすべてのバージョンをアップグレードします。 ncu -u  
#上記のコマンドを実行してすべてのモジュールを更新します。ただし、実際の開発では、すべてを一度に更新することはお勧めしません。実際のニーズに応じて、指定したモジュールを更新することができます。

方法 2:

# npm-check をグローバルにインストールします。
npm install -g npm-check
# 更新可能な依存関係を確認する npm-check
# 依存関係を更新する npm-check -u
# メインバージョンを更新する別の方法は、最初にアンインストールしてから再インストールすることです # アンインストール npm uninstall xxx
# 再インストール - 最新バージョン npm install xxx
# 再インストール -

表示する

バージョンを指定します npm install [email protected]

  • npm バージョンの表示

npm -v

  • インストールされているパッケージのバージョンの表示

npm パッケージ名 -v

  • npm ヘルプの表示

npm help npm

  • で使用されるすべてのフォルダーの表示

npm ヘルプ フォルダー

  • モジュール リストの表示 (ローカルにインストールされているモジュールのリストの表示)

npm リスト
# 省略形 ls も使用できます
npm ls

  • グローバルにインストールされているパッケージを表示する

npm list -g -- Depth 0
  • パッケージのバージョンを表示する
npm list vue-cli

  • ノードモジュールの package.json フォルダーを表示する

npm view moduleNames
  • パッケージの依存関係を表示する
npm view

  • パッケージのソース ファイル アドレスを表示するための

modleName 依存関係
npm view moduleName repository.url

  • パッケージが依存するノードのバージョンを表示する

npm view moduleName Engines

  • 現在のパッケージのインストール パスを表示する

npm root

  • グローバル パッケージのインストール パスを表示する

npm root - g

  • パッケージが古いかどうかを確認する

    このコマンドは、期限内に更新できるすべての古いパッケージをリストします。

npm

  • パッケージは、package.json が含まれるフォルダーです

    。

    npm の json フォルダーにアクセスする方法は次のとおりです。

npm help json

このコマンドはデフォルトの方法で Web ページを開きます。デフォルトの起動プログラムが変更されている場合、Web ページとして開かない場合があります。

  • パッケージ名がすでに存在するかどうかを確認する

    npm パッケージを公開する場合、特定のパッケージ名がすでに存在するかどうかを確認する必要があります

。 npm search packageName

# 検索の代わりに略語 s を使用することもできます 
npm s packageName

npm その他のコマンド

npm cache clean # npm キャッシュをクリアします npm prune # プロジェクト内の未使用のパッケージをクリアします npm outdated # モジュールが古いかどうかを確認します npm repo jquery # デフォルトのブラウザが開き、github の jquery ページにジャンプします npm docs jquery # デフォルトが開きますブラウザは、github の jquery の README.MD ファイル情報にジャンプします。 npm home jquery # デフォルトのブラウザが開き、github の jquery のホームページにジャンプします。

npm 依存関係パッケージのバージョン番号

npm バージョン番号の形式 XYZ は

、メジャー バージョン番号.マイナー バージョン番号.リビジョン番号を表します。バージョン番号の増分規則は

  • 次

    • のとおりです。下位互換性のある機能が追加されます。

  • リビジョン番号: 下位互換性の問題を修正する場合。

依存ライブラリのバージョン番号、シンボルに

  • はシンボルがありません
1.0.0
現在のライブラリ/プロジェクトは、現在のバージョン番号を使用する必要があります。同じライブラリと異なるバージョンが他の依存関係に使用されている場合、必要なバージョン ファイルを保存するために、node_modules フォルダがライブラリ フォルダの下に作成されます。による。
  • ~番号は
メジャー バージョン番号とマイナー バージョン番号を変更しません。たとえば、~2.0.0 の場合は、バージョン 2.0.0、2.0.2、および 2.0.9 を使用できます。
  • ^番号は
メジャー バージョン番号を変更しません (メジャー バージョン番号は 0 ではありません)。たとえば、^2.0.0 のように、バージョン 2.0.1、2.2 を使用できます。 2、および2.9.9。
  • * 記号
* は、どのバージョンにもバージョンの制限がないことを意味します。通常、"base": "*"
  • 記号は
、インストール パッケージがより大きい限り、
使用されません。
このバージョンであれば問題ありません。例: "node": "> 4.0.0"
  • > = 記号
が特定のバージョンより大きい場合は、このバージョン以上のインストール パッケージが存在することを意味します。例: "node": ">= 4.0.0"
  • <記号が
特定のバージョン未満の場合は、このバージョンより小さいインストール パッケージであれば問題ないことを意味します。 例:"http- proxy-middleware": "<0.17.3"
  • <=数値
は特定のバージョン以下です。つまり、インストール パッケージがこのバージョン以下であれば問題ないことを意味します。たとえば、 : "http-proxy-middleware": "<= 0.17.3"
  • -number -
2 つのバージョン番号の間のバージョンを示します "base": "1.0.1-1.5.9"
たとえば、1.0.1-1.5.9 では、1.0.1 から 1.5.9 までの任意のバージョンを使用できます。
関連記事