WebStorm 2020.3 ヘルプ

npm、pnpm、Yarn

WebStorm は npm(英語)Yarn(英語)Yarn 2(英語)pnpm(英語) と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。

WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析し、スクリプトの定義を認識し、ツリービューにスクリプトを表示し、ツリー内のスクリプトと package.json ファイル内のその定義の間を移動できるようにします。詳細については、npm(英語)Yarn(英語)pnpm(英語) の公式 Web サイトを参照してください。

WebStorm は、Yarn ワークスペース(英語)を使用してプロジェクトを検出し、ワークスペースの package.json ファイルにリストされているが、ルート node_modules フォルダーにあるすべての依存関係にインデックスを付けます。

WebStorm indexes all the dependencies listed in different package.json file but stored in the root node_modules folder

始める前に

  • Node.js(英語) をダウンロードしてインストールします。npm もインストールされているため、これを使用する場合は、前の手順を完了してください。

  • Yarn を使用するには、Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。

  • pnpm を使用するには、埋め込まれたターミナルAlt+F12)を開き、次のように入力します。

    npm install --g pnpm

    詳細については、pnpm 公式 Web サイト(英語)を参照してください。

プロジェクトパッケージマネージャーの選択

WebStorm を使用すると、プロジェクトで npm、Yarn、Yarn 2、または pnpm のいずれを使用するかを選択できます。

デフォルトでは、WebStorm は npm を提案します。ただし、yarn.lock ファイルを使用してプロジェクトを開き、Yarn がコンピューターにインストールされている場合、WebStorm はこのプロジェクトのパッケージマネージャーを Yarn に自動的に変更します。

pnpm-lock ファイルを使用してプロジェクトを開き、pnpm がコンピューターにインストールされている場合、WebStorm はこのプロジェクトのパッケージマネージャーを自動的に pnpm に変更します。

Yarn1 または pnpm をデフォルトの WebStorm パッケージマネージャーとして設定するも使用できます。

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。Node.js および NPM ページが開きます。

  2. パッケージマネージャーフィールドで、プロジェクトのパッケージマネージャーを指定します。

    Select project package manager: choose the default system installation
    • システムのデフォルトインストールを使用するには、npmyarn、または pnpm を選択します。

    • パッケージマネージャーのカスタムインストールを使用するには、選択をクリックし、関連するパッケージマネージャーのインストールフォルダーを選択します。

      Select project package manager: choose a custom installation

    実行 / デバッグ構成 : NPM ダイアログのパッケージマネージャーリストから Project エイリアスを選択すると、WebStorm は選択されたパッケージマネージャーを自動的に使用します。WebStorm はまた、実行 'npm install' / 実行 'yarn install' / 実行 'pnpm install' コマンドを呼び出すか、npm / Yarn / pnpm スクリプトを実行するたびに、選択したパッケージマネージャーへのパスを使用します。詳細については、スクリプトの実行とデバッグを参照してください。

プロジェクトで Yarn 2 を設定する

  1. Yarn 1 がグローバルにインストールされていることを確認し、Yarn オフィシャル Web サイト(英語)の説明に従って、プロジェクトで Yarn2 を有効にします。埋め込まれたターミナル Alt+F12 を使用して、コマンドを入力します。

  2. 設定 / 環境設定ダイアログ Ctrl+Alt+S言語およびフレームワーク | Node.js および NPM に移動し、パッケージマネージャーリストからプロジェクトの Yarn 2 パッケージへのパスを選択します。

Yarn 1 または pnpm をデフォルトの WebStorm パッケージマネージャーとして設定する

  1. 新規プロジェクトの設定ダイアログ(ファイル | 新規プロジェクトの設定 | 新規プロジェクトの設定)を開き、言語およびフレームワーク | Node.js および NPM に進みます。

  2. 開いた Node.js および NPM ページで、パッケージマネージャーリストから yarn または pnpm を選択します。

その後、WebStorm は、新しいプロジェクトを作成するたびに、選択されたパッケージマネージャー(Yarn または pnpm)をデフォルトとして提案します。

package.json の編集

WebStorm は、package.json ファイルでプロジェクトの依存関係を処理するのに役立ち、広範なコーディング支援を提供します。

  • パッケージ名についてはコード補完。

    Code completion for package names
  • 利用可能な最新のパッケージバージョンに関する情報。

    Showing the latest available package version
  • npm install <package>@<version> または yarn add <package>@<version> を介してインストールできるバージョンの範囲に関する情報。` npm install または yarn install を実行すると、この範囲から入手可能な最新バージョンがインストールされます。

    Ctrl を押してバージョンにカーソルを合わせると、ツールチップに情報が表示されます。セマンティックバージョニングの詳細については、npm の公式ドキュメント(英語)を参照してください。

    Showing the range of available package versions
  • 以前のパッケージバージョンのコード補完。 Ctrl+Space を押すか、最新のものとは異なるバージョンを入力し始めると、WebStorm はパッケージの以前のすべてのバージョンを含む候補リストを表示します。

    Code completion for previous package versions
  • パッケージのクイックドキュメント検索。

    Quick documentation look-up for packages

パッケージのインストールと更新

ご存知のように、npm はパッケージをグローバル(英語)に、またはプロジェクトの依存関係または開発の依存関係としてインストールできます。詳細については、npm 公式 Web サイトを参照してください(英語)

pnpm はまた、パッケージをグローバルに、またはプロジェクトの依存関係または開発の依存関係としてインストールします。詳細については、pnpm 公式 Web サイトを参照してください(英語)

Yarn を使用すると、パッケージをグローバル(英語)に、またはプロジェクトの依存関係としてインストールできます。詳細については、Yarn オフィシャル Web サイト(英語)を参照してください。

WebStorm では、パッケージはエディター、package.json ファイル、組み込みのターミナル Alt+F12、または Node.js と npm ページにインストールできます。

package.json から

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

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

    Install dependencies popup

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

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

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

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

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

    Update dependencies: popup

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

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

    Installed version of a package is not up to date

内蔵ターミナル

埋め込まれたターミナル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 の編集からさらに学びましょう。

Node.js と NPM ページ

WebStorm は、Node.js と NPM ページに現在インストールされているすべてのパッケージを表示します。ページを開くには、設定 / 環境設定ダイアログ Ctrl+Alt+S言語およびフレームワーク | Node.js および NPM に移動します。

グローバルにインストールされたパッケージが一番上に表示されます。各パッケージについて、WebStorm は現在インストールされているバージョンと利用可能な最新バージョンを表示します。

パッケージをインストールする

  1. the Add button をクリックして表示される使用可能なパッケージダイアログで、必要なパッケージを選択します。

  2. デフォルトでは、最新のパッケージバージョンがインストールされています。別のものをインストールするには、バージョン指定チェックボックスを選択してリストから必要なバージョンを選択します。

  3. デフォルトのインストールはローカルです。別のインストールタイプを使用するには、オプションチェックボックスを選択し、グローバルインストールの場合は -g を、依存関係 / 開発依存関係としてパッケージをインストールするには --save / --save-dev を入力します。npm(英語)Yarn(英語) の公式 Web サイトで詳細を参照してください。

パッケージの場所を表示する

  • パッケージ名の上にマウスポインタを置きます。WebStorm はパッケージへのパスをツールチップに表示します。

パッケージを最新バージョンに更新する

  • リストからパッケージを選択してthe Upgrade buttonをクリックします。

パッケージを削除する

  • リストからパッケージを選択してthe Uninstall (Delete) buttonをクリックします。

スクリプトの実行とデバッグ

npm、Yarn、または pnpm スクリプトは、エディターの package.json ファイルから、専用の npm ツールウィンドウのスクリプトツリーから、専用の実行構成に従って、または start-up または before-launch タスクとして自動的に起動できます。

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

スクリプトのデバッグセッション中に、WebStorm はデバッグツールウィンドウを開きます。ここで、プログラムのステップ実行、プログラムの実行の停止と再開中断時のプログラムの調査実際の HTML DOM の表示などを行うことができます。

package.json からのスクリプトの実行とデバッグ

WebStorm を使用すると、package.json ファイルから単一のスクリプトをすばやく起動できます。複数のスクリプトを実行またはデバッグするには、実行構成または npm ツールウィンドウを使用します。

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

    Run/debug a script from package.json
  • Ctrl+Shift+F10 を押してスクリプトを実行することもできます。

npm ツールウィンドウからのスクリプトの実行とデバッグ

プロジェクトツールウィンドウで package.json ファイルを選択するか、エディターでファイルを開き、コンテキストメニューから npm スクリプトの表示を選択すると、ツールウィンドウが開きます。npm または Yarn を呼び出すとすぐに、それが呼び出された package.json ファイルの scripts プロパティ内で定義されたスクリプトのツリーの構築を開始します。プロジェクトに複数の package.json ファイルがある場合は、それぞれに個別のスクリプトツリーを作成し、以前に作成したツリーを削除せずにスクリプトを実行できます。各ツリーは個別のノードに表示されます。

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

  • プロジェクトツールウィンドウで必要な package.json ファイルを選択するか、エディターで開き、コンテキストメニューから npm スクリプトの表示を選択します。npm ツールウィンドウが開き、選択または開いた package.json ファイルに従って構築されたスクリプトツリーが表示されます。

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

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

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

ツリーを再構築する

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

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

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

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

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

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

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

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

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

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

実行構成によるスクリプトの実行とデバッグ

エディターまたは npm ツールウィンドウからスクリプトを実行またはデバッグすると、WebStorm は一時的な実行構成を自動的に作成します。使用する以外に、独自の npm 実行構成を作成して起動できます。

  1. メインメニューから実行 | 構成の編集を選択します。

  2. ツールバーのthe Add buttonをクリックし、リストから npm を選択します。実行 / デバッグ構成 : npm ダイアログが開きます。

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

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

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

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

  6. ツールバーのリストから新しく作成された実行構成を選択し、Runをクリックします。出力は実行ツールウィンドウに表示されます。

なんでも実行でスクリプトを実行する

なんでも実行は、スクリプトをすばやく開始する方法です。

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

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

    Run Anything: npm script

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

    Running script in the Debug tool window from the Run Anything popup

起動時にスクリプトを自動的に実行する

定期的に実行するスクリプトがいくつかある場合は、対応する実行構成を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、ツール | 開始タスクに移動します。

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

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

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

起動前タスクとしてのスクリプトの実行

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

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

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

最終更新日 :

関連ページ:

Node.js および NPM

Windows および Linux 用のファイル | 設定 | 言語およびフレームワーク | Node.js および NPMmacOSのWebStorm | 環境設定 | 言語およびフレームワーク | Node.js および NPMこのページは、JetBrains リポジト...

ターミナル

WebStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、その他のコマンドラインタスクの実行に使用します。ターミナルエミュレータ...

実行ツールウィンドウ

実行ツールウィンドウには、アプリケーションで生成された出力が表示されます。複数のアプリケーションを実行している場合は、それぞれが実行 / デバッグ構成が適用された後に名前が付けられたタブに表示されます。アプリケーションをre-runすると、新しい出力によってタブの内容が上書きされます。アプリケーショ...

デバッグツールウィンドウ

デバッガーセッションを開始すると、WebStorm はデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガーアクションを実行し、プログラムデータ(フレーム、スレッド、変数など)を分析できます。コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。ツール...

デバッガーセッションを開始する

デバッガーセッションは実行 / デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。一度に異なる設定で複数のデバッガーセッションを実行できます。構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStorm に...

中断されたプログラムを調べる

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、ブレークポイントに到達するか、プログラムを手動で一時停止するまで、プログラムは正常に実行されます。その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。誤ってデバッグツ...