你的浏览器还没开启 Javascript 功能!

ASP.NET Core MVCでnpmを用いて静的コンテンツを管理

ASP.NET Core MVC ではフロント側のパッケージはデフォルトBowerで管理されます。しかし、Bowwerは既にMicrosoft非推奨のため、フロント側のパッケージをnpmで管理する方法を記述します。

ほぼ自分用の備忘メモです。

前提

1. 環境情報

環境/ソフトウェア内容
オペレーティングシステムWindows 10 1903
.NET Core SDK2.1.801
IDEVisual Studio 2019
NodeJs10.16.3 LTS

手順

1. プロジェクト作成

dotnet cliにてMVCプロジェクトを作成します。

dotnet new mvc -n ds.webApp

2. npmモジュールをインストール

Visual Studioからnpmをインストールするできるように以下の拡張機能をインストールします。

作成したプロジェクトを開き、プロジェクトを右クリックして「Quick Install Package」を選択します。

必要なパッケージをタイプして、Installを押下します。

すると、プロジェクトフォルダ配下に「node_modules」フォルダが作成され、その中にパッケージが入っています。

3. BuildBundlerMinifierで自動化

あとは「node_modules」の中身を「wwwroot」に移動すればいいですが、bundleを用いて自動化できるようにします。

dotnet cliにて、nugetからBuildBundlerMinifierをプロジェクトにインストールします。

dotnet add package BuildBundlerMinifier

プロジェクトは以下にbundleconfig.jsonを作成し、npmでインストールしたパッケージをwwwrootへ自動コピーできるように設定します。

  • 設定例(bundleconfig.json)

      [
          {
              "outputFileName": "wwwroot/lib/bootstrap/dist/css/bootstrap.css",
              "inputFiles": [
                  "node_modules/bootswatch/dist/superhero/bootstrap.css"
              ],
              "minify": {
                  "enabled": true,
                  "renameLocals": true
              }
          },
          {
              "outputFileName": "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
              "inputFiles": [
                  "node_modules/bootstrap/dist/js/bootstrap.js"
              ],
              "minify": {
                  "enabled": true,
                  "renameLocals": true
              }
          },
          {
              "outputFileName": "wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js",
              "inputFiles": [
                  "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
              ],
              "minify": {
                  "enabled": true,
                  "renameLocals": true
              }
          },
          {
              "outputFileName": "wwwroot/lib/jquery/dist/jquery.js",
              "inputFiles": [
                  "node_modules/jquery/dist/jquery.js"
              ],
              "minify": {
                  "enabled": true,
                  "renameLocals": true
              }
          },
          {
              "outputFileName": "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
              "inputFiles": [
                  "node_modules/jquery-validation/dist/jquery.validate.js"
              ],
              "minify": {
                  "enabled": true,
                  "renameLocals": true
              }
          },
          {
              "outputFileName": "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
              "inputFiles": [
                  "node_modules/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"
              ],
              "minify": {
                  "enabled": true,
                  "renameLocals": true
              }
          }
      ]

これでプロジェクトをビルドするたびに、フロント側のパッケージも最新化されます。