ツイートはてブ LINE Pocket

NPM ツールウィンドウ

ツールウィンドウを npm、pnpm、Yarn スクリプトを実行するに使用します。

始める前に

Node.js をダウンロードしてインストールします。npm もインストールされることに注意してください。使用する場合は、事前の手順は完了しています。
Yarn を使用するには、Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。

スクリプトの実行

プロジェクトツールウィンドウ Alt+1 で package.json ファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示を選択すると、npm ツールウィンドウが開きます。

npm、pnpm、Yarn を呼び出すとすぐに、ツールは、呼び出された package.json ファイルの scripts プロパティ内で定義されたスクリプトのツリーの構築を開始します。

プロジェクトに複数の package.json ファイルがある場合は、それらごとに個別のスクリプトツリーを構築し、以前に構築したツリーを削除せずにスクリプトを実行できます。各ツリーは、個別のノードに表示されます。

ツールウィンドウには、スクリプト出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。

スクリプトのツリーを構築するには、次のいずれかを実行する

プロジェクトツールウィンドウ Alt+1 で必要な package.json ファイルを選択するか、エディターで開いてコンテキストメニューから npm スクリプトの表示を選択します。
npm ツールウィンドウで、ツールバーのをクリックし、リストから必要な package.json ファイルを選択します。デフォルトでは、WebStorm はプロジェクトのルートに package.json ファイルを表示します。別の package.json ファイルがある場合は、package.json を選択してくださいをクリックして表示されるダイアログで必要な package.json ファイルを選択します。WebStorm は、選択した package.json ファイルへのパスをそのタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

ツリーを再構築する

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

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

ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。
デフォルトでは、ツリーには、package.json（オプション定義順序）で定義されている順序でスクリプトが表示されます。

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

スクリプトをダブルクリックしてください。
ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから <スクリプト名> の実行を選択します。

いくつかのスクリプトを実行する

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

ツールバー

	package.json を追加	このボタンをクリックして、別の package.json ファイルのスクリプトツリーを作成します。リストから必要な package.json ファイルを選択します。WebStorm は新しいノードを追加し、その下にスクリプトのツリーを構築します。
	package.json を削除	選択したノードにあるスクリプトのツリーを削除するには、このボタンをクリックします。
	スクリプトの再ロード	このボタンをクリックすると、選択したノードにあるスクリプトのツリーが再構築されます。npm はその場でツリーに変更を適用しないため、対応する package.json ファイルを更新した後にツリーを再構築する必要があるかもしれません。
	すべて折りたたむ	このボタンをクリックすると、すべてのスクリプトツリーが非表示になり、package.json ノードだけが表示されます。
		このボタンをクリックして、現在のビューを構成し、ツールウィンドウの表示モードを変更します。詳細については、ツールウィンドウの表示モードを参照してください。ほとんどのメニュー項目は、オンまたはオフにできるオプションであることに注意してください。オンになっているオプションには、名前の左側にチェックマークが付いています。NPM -specific オプションは次のとおりです。 npm 構成の編集 : npm 実行 / デバッグ構成ダイアログを開き、npm および Node インタープリターの現在の設定を更新するには、このオプションを選択します。npm、pnpm、Yarn を参照してください。並べ替え : スクリプトがツリーに表示される順序を構成するには、このオプションを選択します。ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。デフォルトでは、ツリーには、package.json（オプション定義順序）で定義されている順序でスクリプトが表示されます。
	非表示	このボタンをクリックすると、ツールウィンドウが非表示になります。再度表示するには、メインメニューで表示 \| ツールウィンドウ \| npm を選択します。ツールウィンドウが再び表示され、以前に構築されたタスクのツリーがすべて表示されます。

ツリーのコンテキストメニュー

npm の設定	このメニュー項目を選択して、npm 設定ダイアログを開き、Node.js 構成を表示または編集します
ソースに移動	現在のツリーが構築されている package.json ファイルを開くには、このメニュー項目を選択します。
スクリプトの再ロード	選択したノードにあるスクリプトのツリーを再構築するには、このメニュー項目を選択します。
パスをコピー	現在のツリーがクリップボードに作成された package.json ファイルへのパスを保存するには、このメニュー項目を選択します。
package.json を削除	選択したノードにあるスクリプトのツリーを削除するには、このメニュー項目を選択します。

スクリプトのコンテキストメニュー

<スクリプト名> の実行	選択したスクリプトを実行するには、このメニュー項目を選択します。
編集 <script name> settings	このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したスクリプトの事前定義された設定を編集できます。
ソースに移動	現在のツリーが構築されている package.json ファイルを開き、選択したスクリプトの定義に移動するには、このメニュー項目を選択します。

最終更新日: 2024 年 10 月 08 日

関連ページ：

npm、pnpm、Yarn

WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...

名前でターゲットを検索する (どこでも検索)

プロジェクト内またはプロジェクト外のアイテムは、その名前で見つけることができます。単一のエントリポイントから、Git 内のファイル、アクション、クラス、シンボル、設定、UI 要素などを検索できます。プロジェクト内のテキストの検索の詳細については、「プロジェクト内のターゲットを検索する」を参照してください。どこでも検索：に移動するか、を 2 回押して、すべて、クラス、ファイル、シンボル、アクションタブのある検索ウィンドウを開きます。デフォルトでは、すべてタブが開き、WebStorm に最近のフ...

ツールウィンドウの表示モード

デフォルトでは、ツールウィンドウはメインウィンドウの端にアタッチされ、常に表示されています。たとえば、特定のツールウィンドウの表示モードを変更して、アクティブな場合にのみ表示したり、ツールウィンドウバーから切り離したりできます。ツールウィンドウの表示モードを変更するメインメニューでに移動し、表示モードを選択します。または、ツールウィンドウのヘッダーでクリックし、を選択して、表示モードを選択します。次のツールウィンドウの表示モードを使用できます。ドック (ピン留め): これは、ツールウィンドウが...

実行 / デバッグ構成: NPM

作成: このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「npm、pnpm、Yarn」を参照してください。このダイアログでは、npm および Yarn スクリプトをローカルで実行するための構成を作成します。現在のコンテキストにおける「ローカル」とは、WebStorm 自体がコンピューターにインストールされている Node.js を起動し、その後スクリプトの実行を開始することを意味します。npm、pnpm、Yarn の詳細...

メッセージツールウィンドウ

ツールウィンドウには、Dart アプリケーションの pub ツールの出力が表示されます。詳細については、Dart の依存関係の管理を参照してください。ツールバーボタン：Pub コマンドを再実行最後に実行された Pub コマンドを再実行します。停止コンパイルを終了します。このボタンは、コンパイルが進行中のときに有効になります。タブをピン留めこのボタンをクリックすると、現在のタブが保持され、次のコマンドの出力が別のタブに表示されます。タブを閉じる複数のタブが開いている場合は、現在のタブまたはツールウ...

問題ツールウィンドウ

問題ツールウィンドウには、WebStorm がプロジェクト内で検出した問題がいくつかのタブを使用して表示されます。ウィンドウ内で問題を選択してを押すか、問題をダブルクリックしてエディター内の対応する行に移動します。ツールウィンドウのタブを切り替えるには、とを押します。設計時コードインスペクションが有効になっている場合、この IDE は継続的にコードをチェックし、問題を検索します。このタブには、現在のファイルで見つかったすべてのコードの問題がリストされます。エディターでファイルを切り替えると...