複数のターゲットを実行 / デバッグする
WebStorm は、複数の異なるプロセスやタスクを起動する必要があるクライアントサーバーアプリや複雑なテストなど、複数のものを一度に実行 / デバッグする複数の方法を提供します。いずれの場合も、最初の手順は、起動する必要があるタスクまたはプロセスごとに実行構成を作成することです。必要な構成がすべて整ったら、次のオプションがあります。
複合実行構成を使用する複数の構成を並行して起動する
起動前タスクを使用する複数の構成を順番に起動する
複数の構成を一度に起動すると、それぞれが実行またはデバッグツールウィンドウの個別のタブで使用可能になります。
複合実行 / デバッグ構成による並列起動
複合実行構成を使用すると、複数の実行 / デバッグ構成を同時に起動できます。
複合構成を起動すると、その中のすべての構成が同じモード ( 実行またはデバッグ ) で起動されます。クライアント側とサーバー側をデバッグする前に開発モードでアプリケーションを起動するには、package.json から npm スクリプトを実行するか、起動前タスクとして構成するか、別の npm 実行構成を作成します。
複合実行 / デバッグ構成を作成する
セッションで起動する必要がある各アプリとプロセスの実行 / デバッグ構成を作成します。
に進みます。または、Alt+Shift+F10 を押してから 0 を押します。
実行 / デバッグ構成ダイアログで、
をクリックするか Alt+Insert を押してから、複合を選択します。名前フィールドに実行 / デバッグ構成名を指定します。この名前は、リストやメニューで実行 / デバッグ構成を識別するために使用されます。
この実行 / デバッグ構成を他のチームメンバーが利用できるようにするには、プロジェクトファイルとして保存を選択します。
新しい実行 / デバッグ構成を複合構成に含めるには、追加
をクリックし、リストから目的の構成を選択します。
変更を適用し、ダイアログを閉じます。
「起動前」タスクによる順次起動
実行 / デバッグ構成の起動前タスクは、他の実行 / デバッグ構成の起動など、さまざまなタスクに使用できます。例: npm スクリプトを React Native 構成に追加して、バンドラーを起動できます。
「起動前」タスクの構成
セッションで起動する必要がある各アプリとプロセスの実行 / デバッグ構成を作成します。
に進みます。または、Alt+Shift+F10 を押してから 0 を押します。
実行 / デバッグ構成ダイアログで、最後に起動する構成を選択します。
起動前領域を展開し、
をクリックして、新規タスクの追加リストから npm スクリプトの実行を選択します。
NPM スクリプトダイアログで、バンドラーを起動するなどの実行するスクリプトを選択し、OK をクリックします。
必要なスクリプトがすべて追加されていることを確認します。
、 アップ、Alt+Up、
、 ダウン、Alt+Down を使用して起動順序を調整します (一番上のスクリプトが最初に起動されます)。変更を適用し、ダイアログを閉じます。
WebStorm は次の「打ち上げ前」タスクをサポートしています。
Web ブラウザーの起動 : ブラウザーを起動するには、このオプションを選択します。開いたダイアログで、ブラウザーの種類を選択し、開始 URL を指定します。また、ブラウザーを JavaScript デバッガーで起動するかどうかも指定します。
外部ツールの実行 : 外部アプリケーションを実行することを選択します。開いたダイアログで、実行する 1 つまたは複数のアプリケーションを選択します。WebStorm でまだ定義されていない場合は、定義を追加します。詳細については、「外部ツールおよび外部ツール」を参照してください。
別の構成を実行 : 別の実行 / デバッグ構成を実行することを選択し、それが完了するまで待ってから現在の構成を開始します。複数の構成を並行して実行する場合は、複合実行 / デバッグ構成を使用してください。
ファイル監視の実行 : WebStorm に現在アクティブなすべての File Watchers を適用させるには、このオプションを選択します。
リモート外部ツールの実行 : リモート SSH 外部ツールを追加します。
Grunt タスクの実行 : Grunt タスクを実行するには、このオプションを選択してください。
表示される Grunt タスクダイアログで、必要なタスクが定義されている Gruntfile.js を指定し、実行するタスクを選択して、Grunt ツールに渡す引数を指定します。
Node.js インタープリターの場所、渡すパラメーター、grunt-cli パッケージへのパスを指定します。
gulp タスクの実行 : Gulp タスクを実行するには、このオプションを選択してください。
表示される Gulp タスクダイアログで、必要なタスクが定義されている Gulpfile.js を指定し、実行するタスクを選択して、Gulp ツールに渡す引数を指定します。
Node.js インタープリターの場所、それに渡すパラメーター、gulp パッケージへのパスを指定します。
npm スクリプトの実行 : npm スクリプトを実行するには、このオプションを選択してください。
開いた NPM スクリプトダイアログで、npm 実行 / デバッグ構成設定を指定します。
React Native Bundler の起動 : 実行中またはデバッグセッションの一部としてバンドラーを自動的に実行するには、このオプションを選択します。デフォルトでは、これは
react-native startを介して行われます。アプリケーションが Expo(英語) を使用している場合は、
startnpm タスクを介して開発サーバーを実行する必要があります。これを行うには、
をクリックし、React Native の設定ダイアログで npm スクリプトを選択し、リストから開始を選択します。TypeScript のコンパイル : 組み込み TypeScript コンパイラーを実行するように選択し、TypeScript コードに加えたすべての変更が生成された JavaScript ファイルに反映されるようにします。表示される TypeScript のコンパイル設定ダイアログで、エラーの確認チェックボックスを選択または選択解除して、エラーが検出された場合のコンパイラーの動作を設定します。
エラーの確認チェックボックスが選択されていると、コンパイラーはすべてのエラーを表示し、実行構成は開始されません。
エラーの確認チェックボックスがオフの場合、コンパイラーは検出されたすべてのエラーを表示しますが、実行構成は起動されます。
CoffeeScript ソースマップの生成 : CoffeeScript ソースのソースマップを生成するには、このオプションを選択してください。表示されるダイアログで、CoffeeScript のソースファイルがある場所を指定します。
リモートホストにファイルをアップロードする : このオプションを選択すると、デフォルトのサーバーアクセス構成に従って、アプリケーションファイルが自動的にサーバーにアップロードされます。
データソースの切断 : 実行 / デバッグ構成を実行する前にデータソースへの接続を中断する場合は、このオプションを選択します。
関連ページ：
実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...
React Native
React Native を使用すると、JavaScript および React を使用して、iOS および Android 用のネイティブモバイルアプリケーションを開発できます。これは Facebook によって作成され、Instagram、Airbnb などの有名なアプリで使用され、現在は JetBrains 独自の YouTrack mobile アプリケーションで使用されています。React Native オフィシャル Web サイトの詳細を参照してください。WebStorm は、React...
外部ツール
コンパイラー、リンター、コード圧縮プログラムなどのサードパーティのスタンドアロンアプリケーションを使用する推奨方法は、ツール固有のファイルウォッチャーを構成することです。このファイルウォッチャーはファイルへの変更を追跡し、必要に応じてアプリケーションを自動的に実行します。詳細については、File Watchers を参照してください。または、WebStorm でスタンドアロンのサードパーティアプリケーションを外部ツールとして構成することもできます。その結果、メインメニューと場合によってはコンテキス...
外部ツール
このページでは、ローカル外部ツールに対して構成できる設定について説明します。外部ツールの追加と使用の詳細については、「外部ツール」を参照してください。ツールバーボタンを使用して、使用可能な外部ツールのリストを管理します。保持したいがメニューで使用できないツールとグループのチェックボックスをオフにします。追加新しい外部ツールを追加します。除去選択したツールまたはグループを削除します。編集選択したツールを編集します。上へ選択したツールをリスト内で上に移動します。
File Watchers
File Watcher は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する WebStorm システムです。WebStorm は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みの File Watcher テンプレートを提供します。カスタム File Watcher を設定して、他のサードパーティツールを実行することもできます。File Watchers には 2 つの専用コードインスペクションがありま...
リモート SSH 外部ツール
このページでは、リモート外部ツールで行うことができる設定について説明します。外部ツールの追加と使用の詳細については、「外部ツール」を参照してください。ツールバーボタンを使用して、使用可能な外部ツールのリストを管理します。保持したいがメニューで使用できないツールとグループのチェックボックスをオフにします。追加新しい外部ツールを追加します。除去選択したツールまたはグループを削除します。編集選択したツールを編集します。上へ選択したツールをリスト内で上に移動します。