npm、pnpm、Yarn

プロジェクトの依存関係をインストールする

• ポップアップで 'npm install' の実行、実行 'yarn install'、実行 'pnpm install' リンクをクリックします。

  

  IntelliJ IDEA は、依存関係がまだインストールされていない場合、または依存関係が変更された場合に、このポップアップを表示します。ポップアップを閉じるか今後このメッセージを表示しないを選択してポップアップをオフにしても、実行 '<package_manager> install' アクションまたは内蔵ターミナルを使用して依存関係をインストールできます。

  この通知を誤って閉じてしまい、元に戻したい場合は、Ctrl+Shift+A を押して Enable notifications と入力し始め、リストから package.json の依存関係のインストールに関する通知を有効化するを選択します。

• または、関連する package.json ファイルをエディターで開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから 'npm install' の実行を選択します。

プロジェクトの依存関係を更新する

• ポップアップで実行 '<package manager> install' をクリックします。

  

  プロジェクトを開いたり、バージョン管理から更新したり、package.json を編集するたびに、IntelliJ IDEA はこのポップアップを表示します。

• IntelliJ IDEA は、dependencies または devDependencies からのパッケージがインストールされているかどうか、およびそれらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。インスペクションが不一致を検出した場合、クイックフィックスを提案します。適用するには、実行 '<package manager> install' リンクをクリックします。

  

• IntelliJ IDEA は、新しいバージョンが利用可能なパッケージも検出し、パッケージバージョンにカーソルを合わせるとクイックフィックスを提供します。

  

  または、Alt+Enter を押して、リストから <package> を最新バージョンに更新しますを選択します。

  

埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。

• グローバルインストールの場合:

  • npm install --global <package_name>

  • yarn global add <package_name>

  • pnpm --global add <package_name>

• パッケージをプロジェクト依存関係または開発依存関係としてインストールするには:

  • npm install --save <package_name> または npm install --save-dev <package_name>

  • yarn add <package_name> --dev

  • pnpm add --save-dev <package_name>

package.json ファイルにリストされているすべての依存関係をインストールする

埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。

• npm install

• yarn install

• pnpm install

その結果、現在のフォルダーから package.json にリストされているすべての依存関係を取得します。package.json の編集からさらに学びましょう。

• エディターで package.json ファイルを開き、スクリプトの横にあるガターの中の をクリックして、コンテキストメニューから実行 <スクリプト名> またはデバッグ <スクリプト名> を選択します。

  

• Ctrl+Shift+F10 を押してスクリプトを実行することもできます。

スクリプトの出力は、実行ツールウィンドウに表示されます。

デバッグモードでスクリプトを起動すると、IntelliJ IDEA はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

npm ツールウィンドウがまだ開いていない場合は開く

• プロジェクトツールウィンドウで必要な ファイルを選択するか、エディターで開き、コンテキストメニューから npm スクリプトの表示を選択します。

  

  npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って作成されたスクリプトツリーが表示されます。

すでに開いている npm ツールウィンドウでスクリプトのツリーを構築する

1. npm ツールウィンドウで、ツールバーの をクリックして、リストから必要な package.json ファイルを選択します。デフォルトでは、IntelliJ IDEA はプロジェクトのルートに package.json ファイルを表示します。

2. 別の package.json ファイルがある場合は、package.json を選択してくださいをクリックして表示されるダイアログで必要な package.json ファイルを選択します。IntelliJ IDEA は、選択した package.json ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

ツリーを再構築する

• 必要なノードに切り替えて、ツールバーの をクリックします。

  

ツリー内のスクリプトを名前でソートする

• ツールバーの をクリックし、メニューから並べ替えを選択してから、名前を選択します。

  デフォルトでは、ツリーには、package.json（オプション定義順序）で定義されている順序でスクリプトが表示されます。

  

1 つのスクリプトを実行する

• スクリプトをダブルクリックしてください。

• ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから実行 <script name> を選択します。

1 つのスクリプトをデバッグする

• ツリー内のスクリプトを選択して、コンテキストメニューからデバッグ <スクリプト名> を選択します。

  IntelliJ IDEA はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

複数のスクリプトを実行またはデバッグする

• 複数選択モードを使用します。Shift （隣接するアイテムの場合）または Ctrl （隣接しないアイテムの場合）キーを押しながら必要なスクリプトを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。

  

NPM の実行 / デバッグ構成を作成する

1. メインメニューから、実行 | 実行構成の編集を選択します。または、ツールバーのリストから実行構成の編集を選択します。

   

2. 開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから npm を選択します。実行 / デバッグ構成: npm ダイアログが開きます。

3. 実行する CLI コマンド、実行するスクリプト（区切り文字として空白を使用）、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。必要に応じて、スクリプトを実行するためのコマンドライン引数(英語)を入力します。

4. 使用する Node.js インタープリターを指定してください。これはローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。

   オプションで、Node.js に渡す Node.js 固有のオプションパラメーターと環境変数(英語)を指定します。

5. 使用するパッケージマネージャーを指定します。Project エイリアスを選択すると、IntelliJ IDEA は Node.js ページのデフォルトのプロジェクトパッケージマネージャーを使用します。関連するパッケージのエイリアス (npm または yarn) を選択したり、パッケージマネージャーのカスタムインストールへの明示的なパスを指定したりすることもできます。

6. Docker コンテナーでリモート Node.js インタープリターを使用している場合は、Docker コンテナーの設定フィールドのポートとボリュームのバインディング値を確認してください。

   

   npm、pnpm、yarn と Docker とリモートノード .js インタープリターの構成の詳細を参照してください。

スクリプトを実行してデバッグする

• ツールバーのリストから新しく作成された実行構成を選択し、リストの横にある または をクリックします。

• スクリプト実行の結果は実行ツールウィンドウに表示されます。

• をクリックすると、IntelliJ IDEA はデバッグツールウィンドウを開きます。ここで、スクリプトのステップ実行、スクリプトの実行の停止と再開、中断時の検査、デバッガーコンソールでの JavaScript コードスニペットの実行などを行うことができます。

1. Ctrl を 2 回押すか、ナビゲーションバーの をクリックします。なんでも実行ポップアップが開きます。

2. 検索フィールドに npm run または yarn run を入力します。入力すると、IntelliJ IDEA は一致するスクリプトを表示します。リストから必要なものを選択し、Enter を押します。

   

   コマンド出力を実行ツールウィンドウに表示するには、Ctrl+Enter を押し、出力をデバッグツールウィンドウに表示するには、Shift+Enter を押します。

   

1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、ツール | スタートアップタスクに進みます。

2. 開いた起動タスクページで、ツールバーの をクリックします。

3. リストから、必要な npm 実行構成を選択します。設定がリストに追加されます。

   プロジェクトに適用可能な構成がない場合は、 をクリックして実行構成の編集を選択します。次に、開いた実行 / デバッグ構成ページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

1. メインメニューから実行 | 実行構成の編集を選択して実行 / デバッグ構成ダイアログダイアログを開き、リストから必要な構成を選択するか、 をクリックして関連する実行構成タイプを選択して新規に作成します。

2. 開いたダイアログで、起動前エリアの をクリックし、リストから npm スクリプトの実行を選択します。

3. 開いた NPM スクリプトダイアログで、npm 実行 / デバッグ構成設定を指定します。