WebStorm 2020.1ヘルプ

npmおよびYarn

WebStorm integrates with the npm(英語), Yarn(英語) , and Yarn 2(英語) , so you can install, locate, upgrade, and remove packages of reusable code from inside the IDE. The Node.jsとNPMページ provides a dedicated UI for managing packages. Of course, you can also do that from the command line in the built-in ターミナル

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もインストールされているため、これを使用する場合は、前の手順を完了してください。

  • To use Yarn 1 or Yarn 2, install Yarn 1 as described on the Yarn 1 official website(英語).

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

With WebStorm, you can choose whether to use npm, Yarn, or Yarn 2 in a project. By default, WebStorm suggests npm. However if you open a project with a yarn.lock file and Yarn is installed on your machine, WebStorm automatically changes the package manager for this project to Yarn. You can also set Yarn 1 as default WebStorm package manager .

  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スクリプトを実行するたびに、選択されたパッケージマネージャーへのパスを使用します。詳細はスクリプトの実行とデバッグを参照してください。

Set up Yarn 2 in your project

It is recommended that you install Yarn 2 locally in the project while Yarn 1 should be installed globally. Learn more from the YarnオフィシャルWebサイト(英語)

  1. Make sure you have Yarn 1 installed globally as described on the Yarn 1 official website(英語).

  2. Open the embedded ターミナル ( Alt+F12 ) and, depending on the version of globally installed Yarn 1, type:

    • yarn set version berry for Yarn 1.22 and later

    • yarn policies set-version berry for earlier versions

  3. In the 設定/環境設定 dialog Ctrl+Alt+S , go to 言語とフレームワーク | Node.jsとNPM and select the path to the Yarn 2 package in your project from the パッケージ・マネージャー list.

Set Yarn 1 as the default WebStorm package manager

  1. Make sure you have Yarn 1 installed globally, as described on the Yarn 1 official website(英語).

  2. Open the 新規プロジェクトの設定 dialog ( ファイル | 新しいプロジェクトの設定 | 新規プロジェクトの設定 ) and go to 言語とフレームワーク | Node.jsとNPM . On the Node.js および NPM page that opens, select yarn from the パッケージ・マネージャー list.

    After that, WebStorm will suggest Yarn as default every time you create a new project.

組み込みのターミナルを使用したパッケージのインストール

As you may know, npm can install packages both globally(英語) or as project dependencies or development dependencies, learn more from the npm official website(英語). With Yarn, you can also install packages globally(英語) or as project dependencies, see YarnオフィシャルWebサイト(英語) for details.

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

  • 埋め込みターミナル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からの依存関係のインストールに関する通知を有効にするを選択します。

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

  • Click 実行 'npm install' or 実行 'yarn install' in the popup.

    ws_npm_yarn_package_run_npm_update.png

    プロジェクトを開いたり、バージョン管理から更新したり、package.jsonを編集するたびに、WebStormはこのポップアップを表示します。

    WebStormは、dependencies または devDependencies からのパッケージがインストールされていて、それらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。

    ws_node_inspect_that_package_up_to_date.png

    If the inspection detects any mismatch, it suggests a quick-fix. To apply it, press Alt+Enter and choose 実行 'npm install' or 実行 'yarn install' from the list:

    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 ファイルから単一のスクリプトを素早く起動させます。いくつかのスクリプトを実行またはデバッグするには、実行構成または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ツールウィンドウでスクリプトのツリーを作成する

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

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

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

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

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

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

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

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

  3. Specify the CLI command to execute, the scripts to run (use blank spaces as separators), and the location of the package.json file where these scripts are defined. Optionally, type the コマンドライン引数(英語) for executing the scripts.

  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年4月7日

関連ページ:

Node.jsとNPM

WindowsとLinux用のmacOS用このページは、Node.jsプラグインが有効になっている場合、設定ダイアログに表示されます。プラグインはデフォルトで有効になっています。プラグインが無効になっている場合は、プラグインの管理の説明に従って、プラグインページで有効にします。Node インタープリ...

ターミナルエミュレータ

WebStormには、IDE内からコマンドラインシェルを操作するための埋め込みターミナルエミュレータが含まれています。IDEのすぐ内側にコマンドラインがあると、クイックコマンドラインタスクを実行する必要があるときにウィンドウやメンタルフォーカスを切り替えることなく、Gitコマンドなどを実行できます。...

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

When you start a debugger session, WebStorm opens theデバッグtool window where you can perform various debugger actions and analyze the program data (fram...

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

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

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

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

Node.js

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