WebStorm 2020.1ヘルプ

実行/デバッグ構成: NPM

実行 | 構成の編集 | Add New Configuration | %configuration_name%

This page provides descriptions of the configuration-specific items as well as options that are common for all run/debug configurations. To learn how to use this configuration , see npm and Yarn.

In this dialog, create configurations for running npm(英語) and Yarn(英語) scripts locally. "Locally" in the current context means that WebStorm itself starts Node.js installed on your computer, whereupon initiates script execution.

Learn more from npm and Yarn.

始める前に

  1. Node.js(英語)をダウンロードしてインストールします。npmもインストールされ、それを使用する場合は準備完了です。

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

構成タブ

項目

説明

package.jsonIn this field, specify the package.json file to run the scripts from. Choose the file from the drop-down list which shows all the package.json files detected in the current project or click the Browse button and choose the required package.json in the dialog box that opens.
コマンドFrom this list, choose the npm CLI command to execute, by default run-script is selected. Learn more at npm documentation(英語), under the section CLIコマンド
スクリプトFrom this drop-down list, choose the script to which the chosen command will be applied. The list contains all the scripts defined within the scripts property in the package.json file.
引数In this field, specify the command-line arguments to execute a script with. Learn more from the npm official website(英語).
Node インタープリター

このフィールドには、使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

Node オプション

このテキストボックスに、Node.js実行可能ファイルに渡されるNode.js固有のコマンドラインオプションを入力します。受け入れ可能なオプションは次のとおりです。

  • 実行中にCoffeeScriptファイルをオンザフライでJavaScriptにコンパイルするには、--require coffee-script/register を使用します。

    このモードでは、coffee-script パッケージの一部であるregister.jsファイルがプロジェクト内にあることが必要です。npmおよびYarnで説明されているように、coffee-script パッケージをNode.jsページにローカルにインストールする必要があります。

  • Node.js v7をChromeデバッグプロトコル(英語)サポートに使用している場合は、--inspect または --inspect-brk パラメーターを使用します。それ以外の場合、デフォルトでデバッグプロセスはV8デバッグプロトコル(英語)を使用します。

パッケージ・マネージャーIn this field. specify the package manager to use. If you choose the Project alias, WebStorm will use the default project package manager from the Node.js page. You can also choose the relevant package alias (npm or yarn) or specify an explicit path to a custom installation of a package manager.
環境変数In this field, specify the environment variables(英語) for the Node.js executable file, if applicable. Click 参照 the Browse button to the right of the field and configure a list of variables in the 環境変数 dialog, that opens:
  • 新しい変数を定義するには、the Add button をクリックして、変数の名前と値を指定します。

  • 変数定義を破棄するには、リストでそれを選択して the Remove buttonをクリックします。

  • 準備ができたら、OKをクリック

変数の定義は、環境変数読み取り専用フィールドにセミコロンを区切り文字として表示されます。例:

  • NODE_PATH : モジュール検索パスの前に付いたディレクトリの : -separatedリスト。

  • NODE_MODULE_CONTEXTS : 独自のグローバルコンテキストでモジュールをロードするには1に設定します。

  • NODE_DISABLE_COLORS : REPLの色を無効にするには1に設定します。

共通

実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。

項目

説明

名前

実行/デバッグ構成の名前を指定して、たとえば実行ポップアップ Alt+Shift+F10から構成を編集または実行するときにすばやく識別します。

並列実行を許可する

この実行構成の複数のインスタンスを並行して実行できるようにする場合に選択します。

デフォルトでは無効になっており、別のインスタンスの実行中にこの構成を開始すると、WebStormは実行中のインスタンスを停止して別のインスタンスを開始することを提案します。これは、実行/デバッグ構成が多くのリソースを消費し、複数のインスタンスを実行する正当な理由がない場合に役立ちます。

プロジェクトファイルとして保存

実行構成設定を含むファイルを保存して、他のチームメンバーと共有します。デフォルトの場所は.idea/runConfigurationsです。ただし、.ideaディレクトリを共有したくない場合は、プロジェクト内の他のディレクトリに構成を保存できます。

デフォルトでは無効になっており、WebStormは実行構成設定を.idea/workspace.xmlに保存します。

ツールバー

実行/デバッグ構成のツリー表示には、プロジェクトで使用可能な構成を管理したり、デフォルトの構成テンプレートを調整したりするのに役立つツールバーがあります。

項目ショートカット説明
the Add buttonAlt+Insert実行/デバッグ構成を作成します。
the Remove buttonAlt+Delete選択した実行/デバッグ構成を削除します。デフォルト設定は削除できません。
CopyCtrl+D選択した実行/デバッグ構成のコピーを作成します。デフォルト設定のコピーを作成してください。
Save configurationこのボタンは、一時的な構成を選択した場合にのみ表示されます。このボタンをクリックして、一時的な構成を永続的なものとして保存します。
Edit Templatesテンプレート(つまり、デフォルトの実行/デバッグ構成設定)を表示および編集します。テンプレートはテンプレートノードに表示され、新しく作成された構成に使用されます。
Method up / Method downAlt+Up / Alt+Down

選択した実行/デバッグ構成をリスト内で上下に移動します。

リスト内の設定の順序によって、実行/デバッグ構成を選択したときに表示される設定の順序が決まります。

実行/デバッグ構成のデフォルトのテンプレートは、常にアルファベット順にソートされています。

Move into new folder / Create new folder

新しいフォルダーに移動/新しいフォルダーを作成します。実行/デバッグ構成は、フォルダーに配置することでグループ化できます。

フォルダーを作成するには、カテゴリ内の設定を選択し、Folderをクリックしてフォルダー名を指定します。カテゴリだけにフォーカスがある場合は、空のフォルダーが作成されます。

次に、設定をフォルダー内、フォルダー間、またはフォルダー外に移動するには、ドラッグまたは Move Up ボタンと Move Down ボタンを使用します。

グループ化を解除するには、フォルダーを選択して Remove Configurationをクリックします。

Sort configurationsこのボタンをクリックすると、設定がアルファベット順にソートされます。

起動前

この領域では、選択した実行/デバッグ構成を開始する前に実行しなければならないタスクを指定できます。タスクはリストに表示されている順序で実行されます。

項目ショートカット説明
the Add buttonAlt+Insert

このアイコンをクリックして、以下の使用可能なタスクのいずれかを追加します。

  • 外部ツールの実行 : 外部アプリケーションを実行するように選択します。開いたダイアログで、実行したい1つまたは複数のアプリケーションを選択します。WebStormでまだ定義されていない場合は、その定義を追加してください。詳しくは、外部ツールおよび外部ツールを参照してください。

  • 別の構成を実行 : 別の実行/デバッグ構成を実行することを選択します。開いたダイアログで、実行する設定を選択します。

  • ファイル監視の実行 : WebStormに現在アクティブなすべてのファイル監視を適用させるには、このオプションを選択します。

  • Grunt タスクの実行 : Gruntタスクを実行するには、このオプションを選択してください。

    開いたGrunt タスクダイアログで、必要なタスクが定義されているGruntfile.jsを指定し、実行するタスクを選択して、Gruntツールに渡す引数を指定します。

    Node.jsインタープリターの場所、それに渡すパラメータ、およびgrunt-cliパッケージへのパスを指定します。

  • gulp タスクの実行 : Gulpタスクを実行するには、このオプションを選択してください。

    開いたGulp タスクダイアログで、必要なタスクが定義されているGulpfile.jsを指定し、実行するタスクを選択して、Gulpツールに渡す引数を指定します。

    Node.jsインタープリターの場所、それに渡すパラメーター、およびgulpパッケージへのパスを指定します。

  • npm スクリプトの実行 : npmスクリプトを実行するには、このオプションを選択してください。

    開いたNPMスクリプトダイアログで、npm実行/デバッグ構成設定を指定します。
  • TypeScript のコンパイル : 組み込みTypeScriptコンパイラを実行するように選択し、TypeScriptコードに加えたすべての変更が生成されたJavaScriptファイルに反映されるようにします。表示されるTypeScriptコンパイル設定ダイアログで、エラーをチェックチェックボックスを選択または選択解除して、エラーが検出された場合のコンパイラの動作を設定します。

    • エラーをチェックチェックボックスが選択されていると、コンパイラーはすべてのエラーを表示し、実行構成は開始されません。

    • エラーをチェックチェックボックスがオフの場合、コンパイラは検出されたすべてのエラーを表示しますが、実行構成は起動されます。

  • CoffeeScript ソース・マップの生成 : CoffeeScriptソースのソースマップを生成するには、このオプションを選択してください。表示されるダイアログで、CoffeeScriptのソースファイルがある場所を指定します。

the Remove buttonAlt+Deleteこのアイコンをクリックして、選択したタスクをリストから削除します。
EditEnter選択したタスクを編集するには、このアイコンをクリックします。開いたダイアログで必要な変更を加えます。
Method up / Method downAlt+Up / Alt+Downこれらのアイコンをクリックして、選択したタスクをリスト内で1行上または下に移動します。タスクは、リストに表示されている順に実行されます。
このページを表示する実行/デバッグ構成を実際に開始する前に、実行/デバッグ構成設定を表示するには、このチェックボックスを選択します。
ツール・ウィンドウをアクティブにする

デフォルトではこのチェックボックスは選択されており、実行/デバッグ構成を開始すると実行またはデバッグツールウィンドウが開きます。

それ以外の場合、チェックボックスがオフの場合、ツールウィンドウは非表示になります。ただし、構成が実行されている場合は、Alt+4 または Alt+5を押すことにより、構成に対応するツールウィンドウを自分で開くことができます。

最終更新日: 2020年5月08日

関連ページ:

npmおよびYarn

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

Node.js

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

Node.jsとNPM

macOSのWebStorm |プリファレンス | 言語とフレームワーク | Node.jsとNPMこのページは、Node.jsバンドルプラグインが有効になっている場合にのみ表示されます。プラグインが無効になっている場合は、プラグインを管理する説明に従ってプラグインをアクティブにします。Node イ...

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

WebStormでコードを実行またはデバッグするには、実行/デバッグ構成を使用できます。各実行/デバッグ構成は、名前付きの実行/デバッグ起動プロパティのセットを表します。WebStormを使用して実行、デバッグ、またはテストの操作を実行するときは、常にそのパラメーターを使用して、既存の構成のいずれか...

実行/デバッグ構成をグループ化するフォルダーを作成する

同じタイプの実行/デバッグ構成が多すぎる場合、フォルダーにグループ化して、視覚的に区別しやすくすることができます。フォルダーが不要になったら、削除できます。このフォルダーにグループ化された実行/デバッグ構成は、対応する実行/デバッグ構成タイプのルートに移動されます。グループ化すると、実行/デバッグ構...

外部ツール

コンパイラ、linter、コードコンプレッサーなどのサードパーティのスタンドアロンアプリケーションを使用する推奨方法は、ツール固有のファイル監視を構成することです。このファイル監視は、ファイルの変更を追跡し、必要に応じてアプリケーションを自動的に実行します。詳細については、ファイル監視を参照してくだ...