WebStorm 2020.1ヘルプ

npmおよびYarn

WebStormはnpm(英語)Yarn(英語)、およびYarn 2(英語)と統合されているため、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サイト(英語)の説明に従ってインストールしてください。

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

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

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

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

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

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

      Select project package manager

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

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

  1. Yarn 1がグローバルにインストールされていることを確認し、YarnオフィシャルWebサイト(英語)の説明に従ってプロジェクトでYarn 2を有効にします。埋め込まれたターミナルAlt+F12)を使用してコマンドを入力します。

  2. 設定/環境設定ダイアログ Ctrl+Alt+S言語とフレームワーク | Node.jsとNPMに移動し、パッケージ・マネージャーリストからプロジェクトのYarn 2パッケージへのパスを選択します。

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

  • 新規プロジェクトの設定ダイアログ(ファイル | 新規プロジェクトの設定 | 新規プロジェクトの設定)を開き、言語とフレームワーク | Node.jsとNPMに移動します。開いた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'または実行 'yarn 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'または実行 'yarn 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を表示することができます

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ツールウィンドウでスクリプトのツリーを構築する

  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

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

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

  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年6月19日

関連ページ:

Node.jsとNPM

macOSのこのページは、Node.jsバンドルプラグインが有効になっている場合にのみ表示されます。プラグインが無効になっている場合は、プラグインを管理する説明に従ってプラグインをアクティブにします。Node インタープリターこのフィールドでは、現在のプロジェクトのデフォルトのNode.jsインター...

ターミナル

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

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

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

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

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

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

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

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

After the debugger session hasstarted, theデバッグtool window will appear, and the program will run normally until abreakpointis hit or youpausethe progra...