Node.js における npx コマンドの使用法とシナリオ分析

npx 使用チュートリアル

今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを試してみたくなったのですが、ローカルにインストールされている scaffolding バージョンは@2.xxでした。グローバル環境を汚したくないので、 npxコマンドを使うことを考えました。途中で多くの問題に遭遇しました。今後npxより適切に使用し、 npmとの指示を区別するために、このメモを残します。

バージョン 5.2 以降、npm には npx コマンドが追加されました (付属しています)。インストールされていない場合は、手動でインストールしてください。

npm i -g npx

npmとnpxの概念

NPM (Node Package Manager) は、Node.js が提供するパッケージマネージャーです。NPM を使用して node.js パッケージをインストールできます。
NPX（Node Package Executed）は、パッケージを一時的にインストールして実行するためのツールとして理解できます。

要約すれば：

npmはパッケージのインストールに重点を置いています
npxはパッケージの実行に特化しており、特別な実行である。

npx の使用シナリオ (npm と比較したいくつかの利点)

いくつかの使用シナリオから始めて、現在のシナリオに対応するシナリオがあり、それを直接適用できることを願っています。

使用シナリオ 1: プロジェクトにすでにインストールされているパッケージを使用したいが、直接実行できない (グローバルにインストールされていないため、環境変数の問題が発生する)

このシナリオでは、いくつかの愚かな方法があります:

プロジェクトのルートディレクトリに移動し、 node-modules/.bin/包對應的腳本を実行します。
npm scriptを構成する: package.json内のscriptsに方法1追加すると、必要に応じて「npm run custom instructions」を実行してすばやく実行できます。これは基本的に方法1

よりエレガントな方法はnpx命令啦を使用することです。

npx <パッケージに対応するコマンド>
# less コンパイルを例に挙げます:
npx lessc -v # 現在のプロジェクトの less コンパイラのバージョンを表示します

使用シナリオ2: パッケージがグローバルにインストールされており、プロジェクトに異なるバージョンのパッケージがインストールされています。プロジェクトのバージョンを使用します。

今夜の私の落とし穴を2番目の使用シナリオとして取り上げると、私はすでにVue scaffoldingの@2.xxバージョンをグローバルにローカルにインストールしていますが、最新の@4.xxバージョンをローカルプロジェクトファイルディレクトリにインストールして使用したい場合、次のようになります。

# npm i -g vue-cli@2 が実行されました
vue-V # [email protected]
# cd my-projectはすでに実行されています
vue.js のコマンドラインから vue.js を起動します。
vue -V # [email protected]

このとき、 vue -V npm はデフォルトでグローバルパッケージを実行するため、グローバルバージョンが使用されていることがわかります。プロジェクトですでにインストールされているバージョンを使用する場合は、次のコマンドを実行します。

npx <パッケージに対応するコマンド>

# vue-cli を例に挙げます:
npx vue でプロジェクトを作成

使用シナリオ3: パッケージをグローバルまたはプロジェクトにインストールせず、一時的に使用したい場合

このシナリオでは、 npxは必須の選択です。 npxファイルを一時ディレクトリにダウンロードし、使用後に自動的に削除します。Vue Vue-Cli例に挙げてみましょう。今回は突然、 React腳手架のプロジェクトファイル構造を見てみたくなりました。まだ習っていないので、ローカルにもグローバルにもインストールしていません（一時的にスキャフォールディング付きのReactプロジェクトを作成したいだけです）

npx create-react-app my-react-project #プロジェクトのビルド後、React スキャフォールディングは自動的に削除されます

使用シナリオ 4: 特定のバージョンのパッケージを一時的に使用する (ローカルにインストールされていない)

タイトルが示すように、ここでは突然Vue scaffoldingの@3.xxバージョンを使いたいのですが、すでに@2.xxバージョンがグローバルにインストールされています。

cd my-vue-project # 私の vue プロジェクトを入力します npx @vue/cli@3 create big-project # vue-cli の 3.x バージョンを使用して、big-project というプロジェクトを作成します

npxに関するいくつかのパラメータ

特定のバージョンをインストールして使用する: npx 包@版本號包對應的命令
--no-installローカルパッケージの使用を強制します。ローカルパッケージがインストールされていない場合は、エラーが報告されます: npx --no-install vue create my-project
--ignore-existingリモートモジュールを使用するようにインストールnpx --ignore-existing vue create my-project
-p複数のパッケージを一度にインストールするには、パラメータ-pを使用します: npx -p @vue/cli -p less覚えておいてください: 複数のパッケージをインストールするときは必ず -p を使用してください
-c 複数のパッケージを一度インストールして使用するシナリオ-c : 以前のバージョンでnpx -p vue-cli -p less lessc -v & vue -Vコマンドを実行すると、最初のコマンド項目のみが正常に実行され、less エディターのバージョンのみが印刷される可能性があります。 npxの-cパラメータは、指定された範囲のすべてのコマンドを実行するようにnpxに指示します: npx -p vue-cli -p less -c "lessc -v & vue -V" 。これにより、絶対的な安全性が確保されます。注: & は両方のコマンドが実行されることを意味し、| は最初のコマンドが正常に実行され、2 番目のコマンドが実行されないことを意味します。

このセクションで最もよく使用され、重要なポイントはポイント 5 です。この要約に基づくと、インストールされているパッケージとコマンドの数に関係なく (パッケージが 1 つしかインストールされていない場合でも)、 npx -p 包1 -p 包2 -p 包n -c "命令1 & 命令2 & 命令n"に厳密に従ってください。

Node.js における npx コマンドの使い方とシナリオについてはこれで終了です。Node.js npx コマンドの使い方の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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