PhpStorm 2020.2 ヘルプ

実行 / デバッグ構成 : NPM

実行 | 構成の編集 | Add New Configuration | NPM

このダイアログで、npm(英語) および Yarn(英語) スクリプトをローカルで実行するための構成を作成します。現在のコンテキストで「ローカル」とは、PhpStorm 自体がコンピューターにインストールされている Node.js を起動し、スクリプトの実行を開始することを意味します。

npm、pnpm、および Yarn の詳細を参照してください。

始める前に

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

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

構成タブ

項目

説明

package.json このフィールドで、スクリプトを実行する package.json ファイルを指定します。現在のプロジェクトで検出されたすべての package.json ファイルを表示するドロップダウンリストからファイルを選択するか、the Browse buttonをクリックして、開いたダイアログボックスで必要な package.json を選択します。
コマンド このリストから、実行する npm CLI コマンドを選択します。デフォルトでは run-script が選択されています。セクション CLI コマンドの npm ドキュメント(英語)で詳細を参照してください。
スクリプト このドロップダウンリストから、選択したコマンドが適用されるスクリプトを選択します。リストには、package.json ファイルの scripts プロパティ内で定義されたすべてのスクリプトが含まれています。
引数 このフィールドでは、スクリプトを実行するコマンドライン引数を指定します。詳細については、npm 公式 Web サイト(英語)を参照してください。
Node インタープリター

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

Node オプション

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

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

    このモードでは、coffeescript パッケージの一部である register.js ファイルがプロジェクト内にあることが必要です。CoffeeScript コンパイラーをインストールするに従って、coffeescript パッケージがローカルにインストールされていることを確認してください。

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

パッケージマネージャー このフィールドで使用するパッケージマネージャーを指定します。 Project エイリアスを選択した場合、PhpStorm は Node.js ページのデフォルトのプロジェクトパッケージマネージャーを使用します。関連するパッケージエイリアス（npm または yarn）を選択するか、パッケージマネージャーのカスタムインストールへの明示的なパスを指定することもできます。
環境変数 このフィールドで、Node.js 実行可能ファイルの環境変数(英語)を指定します（該当する場合）。フィールドの右側にある参照 the Browse button をクリックし、開いた環境変数ダイアログで変数のリストを構成します。

  • 新しい変数を定義するには、the Add buttonをクリックして、変数の名前と値を指定します。

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

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

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

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

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

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

共通

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

項目

説明

名前

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

並列実行を許可する

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

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

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

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

デフォルトでは無効になっており、PhpStorm は実行構成設定を .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 つまたは複数のアプリケーションを選択します。PhpStorm でまだ定義されていない場合は、その定義を追加してください。詳しくは、外部ツールおよび外部ツールを参照してください。

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

  • Web ブラウザーの起動 : ブラウザを起動するにはこのオプションを選択します。開いたダイアログで、ブラウザの種類を選択し、開始 URL を入力します。また、ブラウザを JavaScript デバッガーで起動するかどうかを指定します。

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

  • 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 コンパイル設定ダイアログで、エラーをチェックチェックボックスを選択または選択解除して、エラーが検出された場合のコンパイラの動作を設定します。

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

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

  • Phing ターゲットの実行 : 実行またはデバッグの前に、指定された Phing ターゲットを実行するためにこのタスクを追加してください。Phing ターゲットを指定するには、参照 the Browse button をクリックして表示されるダイアログで目的のターゲットを選択します。

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

  • リモート外部ツールの実行 : リモート SSH 外部ツールを追加します。

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

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

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

最終更新日 :
実行 / デバッグ構成：NW.js 実行 / デバッグ構成 : Protractor

関連ページ：

npm、pnpm、および Yarn

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

Node.js

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

CoffeeScript

PhpStorm では、JavaScript にコンパイルするCoffeeScriptを使用できます。PhpStorm は*.coffeeファイルを認識し、でマークします。CoffeeScript コードに直接ブレークポイントを設定することができ、PhpStorm はコンパイル中に生成されたソースマ...

Node.js および NPM

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

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

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

外部ツール

スタンドアロンのサードパーティアプリケーションを外部ツールとして定義し、PhpStorm から実行できます。プロジェクトからコンテキスト情報をコマンドライン引数（たとえば、現在選択されているファイル、開いているファイル、プロジェクトのソースパスなど）として外部ツールに渡したり、ツールによって生成され...