Visual Studio で npm パッケージを管理するManage npm packages in Visual Studio

npm を利用すると、Node.js アプリケーションで使用するパッケージをインストールしたり、管理したりできます。npm allows you to install and manage packages for use in your Node.js applications. Visual Studio では、npm を操作したり、UI から、または直接 npm コマンドを実行したりすることが簡単にできます。Visual Studio makes it easy to interact with npm and issue npm commands through the UI or directly. npm に不慣れで詳細が必要な場合、npm ドキュメント ページにお進みください。If you're unfamiliar with npm and want to learn more, go to the npm documentation.

Visual Studio と npm の統合は、プロジェクトの種類によって異なります。Visual Studio integration with npm is different depending on your project type.

重要

npm では、プロジェクト ルートに node_modules フォルダーと package.json が必要です。npm expects the node_modules folder and package.json in the project root. お使いのアプリのフォルダー構造が異なる場合、Visual Studio を使用して npm パッケージを管理するには、フォルダー構造を変更する必要があります。If your app's folder structure is different, you should modify your folder structure if you want to manage npm packages using Visual Studio.

Node.js プロジェクトNode.js projects

Node.js プロジェクトでは、次のタスクを実行できます。For Node.js projects, you can perform the following tasks:

これらの機能は連動し、プロジェクト システムやプロジェクトの package.json ファイルによって同期します。These features work together and synchronize with the project system and the package.json file in the project.

必須コンポーネントPrerequisites

プロジェクトに npm サポートを追加するには、Node.js 開発 ワークロードと Node.js ランタイムがインストールされている必要があります。You need the Node.js development workload and the Node.js runtime installed to add npm support to your project. 詳細な手順については、Node.js プロジェクトの作成に関するページを参照してください。For detailed steps, see Create a Node.js project.

注意

既存の Node.js プロジェクトの場合は、 [既存の Node.js コードから] というソリューション テンプレート、または Open folder (Node.js) プロジェクト タイプを使用して、ご利用のプロジェクトの npm を有効にします。For existing Node.js projects, use the From existing Node.js code solution template or the Open folder (Node.js) project type to enable npm in your project.

ソリューション エクスプローラーからパッケージをインストールする (Node.js)Install packages from Solution Explorer (Node.js)

Node.js プロジェクトの場合、npm パッケージをインストールする最も簡単な方法は、npm パッケージ インストール ウィンドウを使用することです。For Node.js projects, the easiest way to install npm packages is through the npm package installation window. このウィンドウにアクセスするには、プロジェクトの npm ノードを右クリックし、 [新しい npm パッケージのインストール] を選択します。To access this window, right-click the npm node in the project and select Install New npm Packages.

ソリューション エクスプローラーから新しい npm パッケージをインストールする

このウィンドウでは、パッケージを検索し、オプションを指定し、インストールできます。In this window you can search for a package, specify options, and install.

[新しい npm パッケージのインストール] ダイアログのスクリーンショット。

  • [依存関係の種類] - [Standard][Development][Optional] からパッケージを選択します。Dependency type - Chose between Standard, Development, and Optional packages. [Standard] の場合、パッケージはランタイム依存となります。[Development] の場合、パッケージは開発中にのみ必須となります。Standard specifies that the package is a runtime dependency, whereas Development specifies that the package is only required during development.
  • package.json に追加 - 推奨。Add to package.json - Recommended. この構成可能なオプションは非推奨とされます。This configurable option is deprecated.
  • [選択したバージョン] - インストールするパッケージのバージョンを選択します。Selected version - Select the version of the package you want to install.
  • [他の npm 引数] - 他の標準 npm 引数を指定します。Other npm arguments - Specify other standard npm arguments. たとえば、@~0.8 のようなバージョン値を入力し、バージョン リストでは利用できない特定のバージョンをインストールできます。For example, you can enter a version value such as @~0.8 to install a specific version that is not available in the versions list.

インストールの進捗状況を [出力] ウィンドウの npm 出力で確認できます。You can see the progress of the installation in the npm output in the Output window. これには時間がかかる場合があります。This may take some time.

npm 出力

ヒント

関心があるスコープを検索クエリの前に付加するとスコープ パッケージを検索できます。たとえば、mocha の TypeScript 定義ファイルを探すには「@types/mocha」と入力します。You can search for scoped packages by prepending the search query with the scope you're interested in, for example, type @types/mocha to look for TypeScript definition files for mocha. また、TypeScript の型定義をインストールするとき、npm 引数フィールドに @ts2.6 を追加すると、ターゲットの TypeScript バージョンを指定できます。Also, when installing type definitions for TypeScript, you can specify the TypeScript version you're targeting by adding @ts2.6 in the npm argument field.

ソリューション エクスプローラーでインストール済みのパッケージを管理する (Node.js)Manage installed packages in Solution Explorer (Node.js)

npm パッケージはソリューション エクスプローラーに表示されます。npm packages are shown in Solution Explorer. npm ノードの下にあるエントリは、package.json ファイルの依存関係を模倣します。The entries under the npm node mimic the dependencies in the package.json file.

npm パッケージのインストール状態を示すソリューション エクスプローラーの npm ノードのスクリーンショット。

パッケージ ステータスPackage status

  • インストール済みのパッケージ - インストールされ、package.json のリストに入っている- Installed and listed in package.json
  • 無関係なパッケージ - インストールされているが、package.json のリストで明示されていないExtraneous package - Installed, but not explicitly listed in package.json
  • 足りないパッケージ - インストールされていないが、package.json のリストに入っている- Not installed, but listed in package.json

npm ノードを右クリックして、次のいずれかのアクションを行います。Right-click the npm node to take one of the following actions:

  • 新しい npm パッケージのインストール: UI を開いて、新しいパッケージをインストールします。Install New npm Packages Opens the UI to install new packages.
  • npm パッケージのインストール: npm インストール コマンドを実行して、package.json にリストされているすべてのパッケージをインストールしますInstall npm Packages Runs the npm install command to install all packages listed in package.json. (npm install を実行します)。(Runs npm install.)
  • npm パッケージを更新: package.json に指定されたセマンティック バージョニング (SemVer) 範囲に従って、パッケージを最新バージョンに更新します。Update npm Packages Updates packages to the latest versions, according to the semantic versioning (SemVer) range specified in package.json. (npm update --save を実行します)。(Runs npm update --save.). SemVer 範囲は、通常、"~" または "^" を使用して指定します。SemVer ranges are typically specified using "~" or "^". 詳細については、「package.json パッケージの構成」を参照してください。For more information, package.json configuration.

パッケージ ノードを右クリックして、次のいずれかのアクションを行います。Right-click a package node to take one of the following actions:

  • npm パッケージのインストール: npm インストール コマンドを実行して、package.json にリストされているパッケージ バージョンをインストールしますInstall npm Package(s) Runs the npm install command to install the package version listed in package.json. (npm install を実行します)。(Runs npm install.)
  • npm パッケージを更新: package.json に指定された SemVer 範囲に従って、パッケージを最新バージョンに更新します。Update npm Package(s) Updates the package to the latest version, according to the SemVer range specified in package.json. (npm update --save を実行します)。SemVer 範囲は、通常、"~" または "^" を使用して指定します。(Run npm update --save.) SemVer ranges are typically specified using "~" or "^".
  • npm パッケージのアンインストール: パッケージをアンインストールし、package.json からそれを削除します (npm uninstall --save を実行します)。Uninstall npm Package(s) Uninstalls the package and removes it from package.json (Runs npm uninstall --save.)

パッケージ ノードまたは npm ノードを右クリックし、次のいずれかのアクションを行います。Right-click a package node or the npm node to take one of the following actions:

  • package.json のリストに入っている 足りないパッケージをインストールするInstall missing packages that are listed in package.json
  • npm パッケージ を最新バージョンに更新するUpdate npm packages to the latest version
  • パッケージをアンインストールしpackage.json から削除するUninstall a package and remove from package.json

注意

npm パッケージでの問題の解決方法については、トラブルシューティングに関するページを参照してください。For help resolving issues with npm packages, see Troubleshooting.

Node.js 対話型ウィンドウで .npm コマンドを使用する (Node.js)Use the .npm command in the Node.js Interactive Window (Node.js)

Node.js 対話型ウィンドウで .npm コマンドを使用して npm コマンドを実行することもできます。You can also use the .npm command in the Node.js Interactive Window to execute npm commands. Node.js 対話型ウィンドウを開くには、ソリューション エクスプローラーでプロジェクトを右クリックし、 [Node.js 対話型ウィンドウを開く] を選択します。To open the window, right-click the project in Solution Explorer and choose Open Node.js Interactive Window.

このウィンドウで次のようなコマンドを使用してパッケージをインストールできます。In the window, you can use commands such as the following to install a package:

.npm install azure@4.2.3

ヒント

既定では、npm はプロジェクトのホーム ディレクトリで実行されます。By default, npm will execute in your project's home directory. ソリューションにプロジェクトが複数ある場合、プロジェクトの名前かパスを括弧で指定します。If you have multiple projects in your solution specify the name or the path of the project in brackets. .npm [MyProjectNameOrPath] install azure@4.2.3

ヒント

プロジェクトに package.json ファイルが含まれない場合、.npm init -y を使用し、新しい package.json ファイルを既定のエントリで作成します。If your project doesn't contain a package.json file, use .npm init -y to create a new package.json file with default entries.

ASP.NET Core プロジェクトASP.NET Core projects

ASP.NET Core プロジェクトなどのプロジェクトの場合は、プロジェクトで npm サポートを統合し、npm を使用してパッケージをインストールすることができます。For projects such as ASP.NET Core projects, you can integrate npm support in your project and use npm to install packages.

注意

ASP.NET Core プロジェクトでは、npm の代わりにライブラリ マネージャーまたは yarn を使用して、クライアント側の JavaScript ファイルと CSS ファイルをインストールすることもできます。For ASP.NET Core projects, you can also use Library Manager or yarn instead of npm to install client-side JavaScript and CSS files.

npm サポートをプロジェクトに追加する (ASP.NET Core)Add npm support to a project (ASP.NET Core)

プロジェクトに package.json ファイルがまだ含まれていない場合は、package.json ファイルをプロジェクトに追加することで、npm サポートを有効にすることができます。If your project does not already include a package.json file, you can add one to enable npm support by adding a package.json file to the project.

  1. Node.js がインストールされていない場合は、Node.js Web サイトから LTS バージョンをインストールして、外部のフレームワークおよびライブラリとの最善の互換性を確保することをお勧めします。If you don't have Node.js installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

    npm には Node.js が必要です。npm requires Node.js.

  2. package.json ファイルを追加するには、ソリューション エクスプローラーでプロジェクトを右クリックし、 [追加] > [新しい項目] の順に選択します。To add the package.json file, right-click the project in Solution Explorer and choose Add > New Item. [npm 構成ファイル] を選択し、既定の名前を使用して、 [追加] をクリックします。Choose the npm Configuration File, use the default name, and click Add.

    package.json をプロジェクトに追加する

    npm 構成ファイルのリストが表示されない場合は、Node.js 開発ツールがインストールされていません。If you don't see the npm Configuration File listed, Node.js development tools are not installed. Visual Studio インストーラーを使用すれば、Node.js 開発 ワークロードを追加できます。You can use the Visual Studio Installer to add the Node.js development workload. 次に、前の手順を繰り返します。Then repeat the previous step.

  3. package.jsondependencies または devDependencies セクションに 1 つまたは複数の npm パッケージを含めます。Include one or more npm packages in the dependencies or devDependencies section of package.json. たとえば、ファイルに次の内容を追加できます。For example, you might add the following to the file:

    "devDependencies": {
       "gulp": "4.0.2",
       "@types/jquery": "3.3.33"
    }
    

ファイルを保存すると、Visual Studio によってソリューション エクスプローラーの [依存関係] / [npm] ノードの下にパッケージが追加されます。When you save the file, Visual Studio adds the package under the Dependencies / npm node in Solution Explorer. ノードが表示されない場合は、 [package.json] を右クリックし、 [パッケージの復元] を選択します。If you don't see the node, right-click package.json and choose Restore Packages.

注意

シナリオによっては、インストールされている npm パッケージの正しい状態がソリューション エクスプローラーに表示されないことがあります。In some scenarios, Solution Explorer may not show the correct status for installed npm packages. 詳細については、トラブルシューティングのヒントに関するページをご覧ください。For more information, see Troubleshooting.

package.json を使用してパッケージをインストールする (ASP.NET Core)Install packages using package.json (ASP.NET Core)

npm が含まれているプロジェクトでは、package.json を使用して npm パッケージを構成できます。For projects with npm included, you can configure npm packages using package.json. ソリューション エクスプローラーで npm ノードを右クリックし、 [Open package.json](package.json を開く) を選択します。Right-click the npm node in Solution Explorer and choose Open package.json.

npm ノードが選択されているソリューション エクスプローラーのスクリーンショット。

package.json の IntelliSense を使用すると、npm パッケージの特定のバージョンを選択できます。IntelliSense in package.json helps you select a particular version of an npm package.

npm パッケージのバージョンを選択する

ファイルを保存すると、Visual Studio によってソリューション エクスプローラーの [依存関係] / [npm] ノードの下にパッケージが追加されます。When you save the file, Visual Studio adds the package under the Dependencies / npm node in Solution Explorer. ノードが表示されない場合は、 [package.json] を右クリックし、 [パッケージの復元] を選択します。If you don't see the node, right-click package.json and choose Restore Packages.

パッケージをインストールするには数分かかる場合があります。It may take several minutes to install a package. [出力] ウィンドウで npm 出力に切り替えて、パッケージのインストールの進捗状況を確認します。Check progress on package installation by switching to npm output in the Output window.

npm 出力

npm パッケージのトラブルシューティングTroubleshooting npm packages

  • Node.js がインストールされていない場合、npm には Node.js が必要です。Node.js Web サイトから LTS バージョンをインストールして、外部のフレームワークおよびライブラリとの最善の互換性を確保することをお勧めします。npm requires Node.js If you don't have Node.js installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

  • Node.js プロジェクトの場合は、npm サポート用に Node.js 開発 ワークロードがインストールされている必要があります。For Node.js projects, you must have the Node.js development workload installed for npm support.

  • シナリオによっては、こちらに説明されている既知の問題が原因で、インストールされている npm パッケージの正しい状態がソリューション エクスプローラーに表示されないことがあります。In some scenarios, Solution Explorer may not show the correct status for installed npm packages due to a known issue described here. たとえば、パッケージのインストール時に、それがインストールされていないと表示される場合があります。For example, the package may appear as not installed when it is installed. ほとんどの場合、この記事で先に説明したように、package.json を削除し、Visual Studio を再起動して、package.json ファイルを再度追加することで、ソリューション エクスプローラーを更新できます。In most cases, you can update Solution Explorer by deleting package.json, restarting Visual Studio, and re-adding the package.json file as described earlier in this article. または、パッケージをインストールするとき、npm 出力ウィンドウを使用してインストールの状態を確認できます。Or, when installing packages, you can use the npm Output window to verify installation status.

  • 一部の ASP.NET Core シナリオでは、ソリューション エクスプローラーの npm ノードはプロジェクトのビルド後に表示されないことがあります。In some ASP.NET Core scenarios, the npm node in Solution Explorer may not be visible after your build the project. ノードを再び表示するには、プロジェクト ノードを右クリックし、 [プロジェクトのアンロード] を選択します。To make the node visible again, right-click the project node and choose Unload Project. 次に、プロジェクト ノードを右クリックし、 [プロジェクトの再読み込み] を選択します。Then right-click the project node and choose Reload Project.

  • アプリのビルド時または TypeScript コードのトランスパイル時にエラーが表示される場合は、エラーの原因として npm パッケージの非互換性が考えられるので確認してください。If you see any errors when building your app or transpiling TypeScript code, check for npm package incompatibilities as a potential source of errors. エラー特定するには、この記事で前述したように、パッケージをインストールするときに npm 出力ウィンドウを確認してください。To help identify errors, check the npm Output window when installing the packages, as described previously in this article. たとえば、1 つまたは複数の npm パッケージ バージョンが非推奨となっていて、これが原因でエラーが発生する場合、エラーを修正するにはより新しいバージョンをインストールする必要があります。For example, if one or more npm package versions has been deprecated and results in an error, you may need to install a more recent version to fix errors. package.json を使用した npm パッケージのバージョン管理に関する詳細は、「package.json configuration」 (package.json の構成) を参照してください。For information on using package.json to control npm package versions, see package.json configuration.