WebStorm 2018.3ヘルプ

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に自動的に変更します。デフォルトのWebStormパッケージマネージャとしてYarnを設定することもできます 。

現在のプロジェクトのパッケージマネージャを選択するには

  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(英語)の公式サイトから詳細を学んでください。Yarnを使用すると、パッケージグローバル(英語)をインストールすることも、プロジェクトの依存関係としてインストールすることもできます。詳しくは、Yarn(英語)の公式Webサイトを参照してください。

パッケージをインストールするには

  1. 内蔵ターミナルAlt+F12)を開きます。

  2. コマンドプロンプトで次のコマンドのいずれかを入力します。
    • 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. Add icon をクリックし、表示される使用可能なパッケージダイアログで必要なパッケージを選択します。

  2. デフォルトでは、最新のパッケージバージョンがインストールされています。別のものをインストールするには、バージョン指定チェックボックスを選択し、リストから必要なバージョンを選択します。

  3. デフォルトのインストールはローカルです。別のインストールタイプを使用するには、オプションチェックボックスをオンにし、グローバルインストールまたは --save / --save-dev-g を入力して、パッケージを依存関係/開発の依存関係としてインストールします。npm(英語)Yarn(英語)の公式ウェブサイトから詳細を学んでください。

パッケージの場所を表示するには

  • パッケージ名の上にマウスポインタを置きます。WebStormは、パッケージへのパスをツールチップに表示します。

パッケージを最新バージョンにアップグレードするには

  • 一覧からパッケージを選択し、 Upgradeをクリックします。

パッケージを削除するには

  • 一覧からパッケージを選択し、 Uninstall (Delete)をクリックします。

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
    WebStormは、プロジェクトを開いたり、バージョンコントロールから更新したり、 package.jsonを編集したりするたびに、このポップアップウィンドウを表示します。

    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

スクリプトの実行とデバッグ

エディタ内の package.json ファイル、専用npmツールウィンドウ内のスクリプトのツリーから、専用の実行コンフィギュレーションに従って、または自動的にstart-upまたはbefore-launchタスクとしてnpmまたはYarnスクリプトを起動できます。

スクリプトの実行結果は実行ツール・ウィンドウに表示されます。ツールウィンドウには、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 ファイルから単一のスクリプトをすばやく起動できます。複数のスクリプトを実行またはデバッグするには、実行コンフィギュレーションまたは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ツールウィンドウで、ツールバーの icons general add をクリックし、リストから必要な package.json ファイルを選択します。デフォルトでは、WebStormはプロジェクトのルートに package.json ファイルを表示します。

  • 別の package.json ファイルがある場合は、package.jsonを選択をクリックし、表示されるダイアログで必要な package.json ファイルを選択します。WebStormは、タイトルに選択した package.json ファイルへのパスを持つ新しいノードを追加し、新しいノードにスクリプトツリーを構築します。

ツリーを再構築するには

  • 必要なノードに切り替えて、ツールバーの icon_reload_grunt.png をクリックします。

名前でツリー内のスクリプトをソートするには

  • ツールバーの viewMode.png をクリックし、メニューで次でソートを選択し、名前を選択します。
    デフォルトでは、ツリーは 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. メインツールバーのリストから新しく作成した実行コンフィギュレーションを選択し、 Runをクリックします。出力は実行ツール・ウィンドウに表示されます。

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

定期的に実行するスクリプトがいくつかある場合は、対応する実行コンフィギュレーションを開始タスクのリストに追加できます。タスクは、プロジェクトの起動時に自動的に実行されます。

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、ツールにある開始タスクをクリックします。

  2. 開いているスタートアップタスクページで、ツールバーの Add をクリックします。

  3. ドロップダウンリストから、必要なnpm実行コンフィギュレーションを選択します。構成がリストに追加されます。

    適用可能な構成がプロジェクトで利用できない場合は、 Add をクリックして構成の編集を選択します。次に、開く実行/デバッグ構成: NPMページで必要な設定を含む設定を定義します。新しい設定を保存すると、自動的にスタートアップタスクのリストに追加されます。

起動前タスクとしてのスクリプトの実行

  1. メインメニューで実行 | 構成の編集を選択して実行/デバッグ構成ダイアログダイアログを開き、リストから必要な設定を選択するか、 Add New Configuration をクリックして関連する実行コンフィギュレーションタイプを選択して新たに作成します。

  2. 表示されたダイアログボックスで、起動前領域の Add をクリックし、ドロップダウンリストからnpm スクリプトの実行を選択します。

  3. 表示されるNPMスクリプトダイアログボックスで、npmの実行/デバッグ設定を指定します。

最終更新日: 2018年12月12日

関連事項