WebStorm 2019.3ヘルプ

npmおよびYarn

WebStormはnpm(英語)およびYarn(英語)パッケージマネージャーと統合されているため、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

始める前に

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

  2. Yarnを使用するには、Yarn(英語)の公式Webサイトの説明に従ってインストールしてください。

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

WebStormでは、プロジェクトでnpmとYarnのどちらを使用するかを選択できます。デフォルトでは、WebStormはnpmを推奨します。ただし、yarn.lock ファイルを使用してプロジェクトを開き、Yarnがマシンにインストールされている場合、WebStormは自動的にこのプロジェクトのパッケージマネージャーをYarnに変更します。YarnをデフォルトのWebStormパッケージマネージャーとして設定することもできます。

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

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

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

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

      ws_package_manager_configuration.png

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

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

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

  2. 開いたNode.js および NPMページで、パッケージ・マネージャーリストから yarn を選択します。その後、新しいプロジェクトを作成するたびに、WebStormはデフォルトとしてYarnを提案します。

内蔵ターミナルを使ってパッケージをインストールする

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

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

  • 埋め込みターミナルAlt+F12)で、以下のいずれかのコマンドを入力します。

    • グローバルインストール用のnpm install --global <package_name> または yarn global add <package_name>

    • プロジェクトの依存関係または開発の依存関係としてパッケージをインストールするには、npm install --save <package_name> , npm install --save-dev <package_name>、または yarn add <package_name> --dev

package.jsonファイルからすべての依存関係をインストールするには

  • 埋め込みターミナルAlt+F12)で、以下のいずれかのコマンドを入力します。

    • npm install

    • yarn 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をクリックします。

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

package.jsonファイルから依存関係をインストールするには

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

  • ポップアップで実行 'npm install'をクリックしてください。

    ws_npm_yarn_package_run_npm_install_package_json_dependent.png

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

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

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

  • ポップアップで実行 'npm install'をクリックします。

    ws_npm_yarn_package_run_npm_update.png

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

    WebStormは、dependencies または devDependencies からのパッケージがインストールされていて、それらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。

    ws_node_inspect_that_package_up_to_date.png

    インスペクションが何らかの不一致を検出した場合は、迅速な修正を提案します。適用するには、Alt+Enter を押して、リストから実行 'npm install'を選択します。

    ws_node_inspect_that_package_up_to_date_quick_fix.png

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

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

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

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

スクリプトのデバッグを有効にする

  • $NODE_DEBUG_OPTIONpackage.json ファイルの定義に追加します。次に例を示します。

    { "name": "application-name", "version": "0.0.1", "scripts": { "main": "node $NODE_DEBUG_OPTION ./app-compiled.js" } }

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

WebStormは package.json ファイルから単一のスクリプトを素早く起動させます。いくつかのスクリプトを実行またはデバッグするには、実行構成またはnpmツールウィンドウを使用します。

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

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

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

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

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

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

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

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

  • 別の 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

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

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

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

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

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

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

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

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

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

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

最終更新日: 2019年11月24日

関連ページ:

Node.jsとNPM

WindowsとLinux用のmacOS用このページは、Node.jsプラグインが有効になっている場合、設定ダイアログに表示されます。プラグインはデフォルトで有効になっています。プラグインが無効になっている場合は、プラグインを管理する説明に従って、プラグインページで有効にします。Node インタープ...

ターミナルエミュレータ

WebStormには、IDE内からコマンドラインシェルを操作するための埋め込みターミナルエミュレータが含まれています。IDEのすぐ内側にコマンドラインがあると、クイックコマンドラインタスクを実行する必要があるときにウィンドウやメンタルフォーカスを切り替えることなく、Gitコマンドなどを実行できます。...

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

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

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

実行がブレークポイントに到達したとき、またはプログラムを手動で中断したときは、フレームを分析してアプリケーションを調べることができます。フレームはアクティブなメソッドまたは関数呼び出しに対応します。フレームには、呼び出されたメソッドまたは関数のローカル変数、その引数、および式評価を可能にするコードコ...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

アプリケーションの実行

WebStormは特定のスクリプトだけでなくアプリケーション全体を実行することができます。WebStormは、実行/デバッグ構成で定義された設定を利用します。プロジェクトに存在するすべての実行構成は、実行/デバッグ構成を選択しますリストで利用可能です。実行/デバッグ構成を操作するから詳細を参照してく...