WebStorm 2019.1ヘルプ

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(英語)公式サイトの説明に従ってインストールしてください。

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

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

    WebStormは、実行/デバッグ構成: NPMダイアログのパッケージ・マネージャーリストから Project エイリアスを選択すると、選択したパッケージマネージャを自動的に使用します。また、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

  • 以前のパッケージバージョンのコード補完。 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'アクションまたは内蔵ターミナルを使用して依存関係をインストールできます。

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

  • ポップアップで実行 '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 ファイルから1つのスクリプトをすばやく起動できます。複数のスクリプトを実行またはデバッグするには、実行構成またはnpmツールウィンドウを使用します。

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

    ws_run_npm_task.png

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つのスクリプトをデバッグするには

  • ツリー内のスクリプトを選択して、コンテキストメニューからデバッグ<script_name>を選択します。

複数のスクリプトを実行またはデバッグするには

  • 複数選択モードを使用してください:隣接するアイテムの Shift または隣接しないアイテムの Ctrl キーを押し、必要なスクリプトを選択し、選択したコンテキストメニューで実行またはデバッグを選択します。

実行構成によるスクリプトの実行

エディターまたはnpmツールウィンドウからスクリプトを実行またはデバッグすると、WebStormは自動的に一時実行構成を作成します。それらを使用する以外にも、独自のnpm実行構成を作成して起動することができます。

  1. メインメニューで実行 | 構成の編集を選択します。

  2. ツールバーの icons general add をクリックして、リストからnpmを選択します。実行/デバッグ構成: npmダイアログが開きます。

  3. 実行するCLIコマンド、実行するスクリプト(区切り文字として空白を使用)、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。必要に応じて、スクリプトを実行するためのコマンドライン引数(英語)入力します(英語)

  4. 使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはLinux用Windowsサブシステム上のNode.jsです。

    必要に応じて、Node.jsに渡すNode.js固有のオプションパラメータ環境変数(英語)を指定します。

  5. 使用するパッケージマネージャを指定します。 Project エイリアスを選択すると、WebStormはノード.jsページのデフォルトプロジェクトパッケージマネージャを使用します。関連パッケージエイリアス(npm または yarn)を選択するか、パッケージマネージャのカスタムインストールへの明示的なパスを指定することもできます。

  6. mtoolbarバーのリストから新しく作成された実行構成を選択してから、Runをクリックします。出力は実行ツール・ウィンドウに表示されます。

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

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

  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年3月25日

関連事項

関連ページ:

Node.jsとNPM

このページは、Node.jsプラグインが有効になっているときに、設定ダイアログボックスに表示されます。プラグインはデフォルトで有効になっています。プラグインが無効の場合は、プラグインの管理の説明に従ってプラグインページでプラグインを有効にします。項目説明Node インタープリターこのフィールドには、...

組み込みローカルターミナルの操作

WebStormにはローカルターミナルが組み込まれており、IDEを離れずにコマンドラインモードを使用できます。ご使用のプラットフォームに応じて、コマンドプロンプト、Far、powershell、bashなどを操作できます。ターミナルを設定する設定/環境設定ダイアログ(Ctrl+Alt+S)で、ツール...

Node.js

Node.jsはサーバーサイドでJavaScriptを実行するための軽量のランタイム環境です。WebStormはNode.jsと統合して、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、および保守を支援します。npmパッケージの管理やJavaScript linterの実行、...

実行/デバッグ構成ダイアログ

このダイアログボックスを使用して、実行/デバッグ構成を作成、編集、調整、または削除し、新しく作成されたすべての実行/デバッグ設定に適用されるデフォルトのテンプレートを設定します。プロジェクト構成は、構成タイプごとにグループ化されています。既定の構成テンプレートは、ダイアログボックスの左側にあるテンプ...

Pug(Jade)テンプレートエンジン

WebStormは、Pug (Jade)テンプレートエンジンと統合されています。始める前に、コンピューターにNode.jsがあることを確認してください。UIの変更Pug (元玉)プラグインはWebStorm UIに以下の変更を導入しました:Jadeファイル項目が新規メニューに追加されます。Pugファ...

ファイルウォッチャーの使用

ファイルウォッチャーは組み込みのWebStormツールで、IDEでファイルを変更または保存するときにコンパイラ、フォーマッタ、linterなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーをゼロから構成するか、または使用可能なテンプレートの1つを使用できます。設定されたファイルウ...