WebStorm 2020.2ヘルプ

npm、pnpm、およびYarn

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

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

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に自動的に変更します。Yarn 1をデフォルトのWebStormパッケージマネージャーとして設定するも使用できます。

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

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

    Select project package manager
    • システムのデフォルトのインストールを使用するには、npmまたはyarnを選択します。

    • pnpmを使用するには、リストからインストールフォルダーへのパスを選択します。

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

      Select project package manager

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

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

  1. Yarn 1がグローバルにインストールされていることを確認し、YarnオフィシャルWebサイト(英語)の説明に従ってプロジェクトでYarn 2を有効にします。埋め込まれたターミナル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スクリプトは、エディターの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をクリックします。出力は実行ツール・ウィンドウに表示されます。

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

なんでも実行は、npmおよびyarnスクリプトをすばやく起動する方法です。

  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実行/デバッグ構成設定を指定します。

最終更新日: 2020年8月31日

関連ページ:

Node.js および NPM

macOSのWebStorm | 環境設定 | 言語およびフレームワーク | Node.js および NPMこのページは、JetBrainsリポジトリからプラグインをインストールするに従って、設定/環境設定 | プラグインページでNode.jsバンドルプラグインが有効になっている場合にのみ表示されま...

ターミナル

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

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

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

プログラムのステップ・スルー

ステップは、プログラムの段階的な実行を制御するプロセスです。WebStormは、戦略に応じて使用される一連のステップアクションを提供します(たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど)。ステップボタンは、デバッグツールウィンドウのツールバーにあります。ステ...

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

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

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

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