ASP.NET Core プロジェクトでnpmパッケージをインストールする手順を紹介します。
Visula Studio を起動し、ASP.NET Coreのアプリケーションのプロジェクトを作成します。
ソリューションエクスプローラーでnpmパッケージをインストールしたいプロジェクトのノードをクリックして選択し、右クリックします。
ポップアップメニューの[追加]サブメニューの[新しい項目]をクリックします。
[新しい項目の追加]ダイアログが表示されます。中央のエリアのファイルの種類のリストから[npm 構成ファイル]の項目をクリックして選択します。
ダイアログ下部のファイル名はデフォルトの package.json を利用します。ダイアログ右下の[追加]ボタンをクリックします。
package.json ファイルがプロジェクトに追加されました。
package.jsonファイルを修正します。
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
}
}
"devDependencies" セクションにプロジェクトにインストールするパッケージを記述します。
記述方法は次の形式になります。
"(パッケージ名1)":"(バージョン1)",
"(パッケージ名2)":"(バージョン2)",
...
"(パッケージ名n)":"(バージョンn)"
今回は、以下の内容を記述しました。 lottie-web パッケージをインストールします。
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"lottie-web": "5.10.2"
}
}
package.jsonファイルを保存すると、ソリューションエクスプローラーのプロジェクトノードの中の[依存関係]ノードに[NPM]のノードが追加されます。
[NPM]のノードを展開すると、package.jsonに入力したパッケージ名のノードが追加されています。
まだ、npmパッケージはインストールされていないため "インストールされていません" のアラートメッセージが表示されています。
npmパッケージをインストールします。ソリューションエクスプローラーの npm構成ファイルのpackage.jsonファイルをクリックして選択します。
右クリックしてポップアップメニューを表示します。ポップアップメニューの[パッケージの復元]の項目をクリックします。
npmパッケージのインストールが始まります。
インストールが完了すると、ソリューションエクスプローラーのプロジェクトノードの中の[依存関係]ノードに[NPM]のノード内の
npmパッケージの項目の"インストールされていません"の表示がなくなり、アラートのアイコンの表示も消えます。
npmの実行結果のログは、[出力]ウィンドウで[出力元]を[npm]に変更すると確認できます。
ASP.NET Core アプリケーションのプロジェクトディレクトリをエクスプローラーで表示します。node_modulesフォルダが作成されています。
node_modulesフォルダを開きます。フォルダ内にnpmパッケージ名のフォルダと.package-lock.json ファイルが作成されています。
パッケージ名のフォルダを開くと、パッケージに含まれるファイルが表示されます。
