如何在 ASP.NET Core 中使用 Bootstrap 4
我想用 NuGet 更新 ASP.NET Core 中的 Bootstrap。我用這個：
Install-Package bootstrap -Version 4.0.0它確實添加了依賴項，但我現在如何將它添加到我的項目中？本地 NuGet 依賴項的路徑是什麼？
正如其他人已經提到的那樣，包管理器Bower通常用於在不依賴繁重的客戶端腳本的應用程序中像這樣的依賴項，正在退出並積極推薦轉向其他解決方案：
因此，儘管您現在仍然可以使用它，但 Bootstrap 也宣布放棄對它的支持。因此，內置的 ASP.NET Core 模板也正在慢慢被編輯以遠離它。
不幸的是，沒有明確的前進道路。這主要是因為 Web 應用程序不斷向客戶端移動，需要復雜的客戶端建構系統和許多依賴項。因此，如果您正在建構類似的東西，那麼您可能已經知道如何解決這個問題，並且您可以擴展您現有的建構過程，以便在其中簡單地包含 Bootstrap 和 jQuery。
但是仍然有許多 Web 應用程序在客戶端不是那麼繁重，應用程序仍然主要在伺服器上執行，因此伺服器提供靜態視圖。Bower 之前通過簡化發布客戶端依賴項而無需太多流程來填補這一點。
在 .NET 世界中，我們也有 NuGet，並且在以前的 ASP.NET 版本中，我們也可以使用 NuGet 將依賴項添加到一些客戶端依賴項，因為 NuGet 只會將內容正確地放入我們的項目中。不幸的是，使用新
.csproj格式和新 NuGet，已安裝的包位於我們的項目之外，因此我們不能簡單地引用它們。這給我們留下了一些如何添加依賴項的選項：
一次性安裝
這就是 ASP.NET Core 模板（不是單頁應用程序）目前正在做的事情。當您使用它們創建新應用程序時，該
wwwroot文件夾僅包含一個lib包含依賴項的文件夾：
如果您目前仔細查看這些文件，您會發現它們最初是與 Bower 一起放置在那里以創建模板的，但這種情況可能很快就會改變。基本思想是將文件複製一次到
wwwroot文件夾中，以便您可以依賴它們。為此，我們可以簡單地按照 Bootstrap 的介紹，直接下載編譯好的文件。如下載網站所述，這不包括jQuery，因此我們也需要單獨下載；它確實包含 Popper.js，但如果我們稍後選擇使用該
bootstrap.bundle文件——我們將這樣做。對於 jQuery，我們可以簡單地從下載站點獲取一個“壓縮的生產”文件（右鍵點擊連結並從菜單中選擇“將連結另存為…”）。這給我們留下了一些文件，這些文件將簡單地提取並複製到
wwwroot文件夾中。我們還可以創建一個lib文件夾以更清楚地表明這些是外部依賴項：
這就是我們所需要的，所以現在我們只需要調整我們的
_Layout.cshtml文件以包含這些依賴項。為此，我們將以下塊添加到<head>：<environment include="Development"> <link rel="stylesheet" href="~/lib/css/bootstrap.css" /> </environment> <environment exclude="Development"> <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" /> </environment>以及最後的以下塊
<body>：<environment include="Development"> <script src="~/lib/js/jquery-3.3.1.js"></script> <script src="~/lib/js/bootstrap.bundle.js"></script> </environment> <environment exclude="Development"> <script src="~/lib/js/jquery-3.3.1.min.js"></script> <script src="~/lib/js/bootstrap.bundle.min.js"></script> </environment>您也可以只包含縮小版本並在
<environment>此處跳過標籤助手以使其更簡單。但這就是您需要做的所有事情才能讓您開始。來自 NPM 的依賴項
更現代的方法，如果你想保持你的依賴更新，將是從 NPM 包儲存庫中獲取依賴。為此，您可以使用 NPM 或 Yarn；在我的範例中，我將使用 NPM。
首先，我們需要
package.json為我們的項目創建一個文件，這樣我們就可以指定我們的依賴項。為此，我們只需從“添加新項目”對話框中執行此操作：
一旦我們有了它，我們需要編輯它以包含我們的依賴項。它應該看起來像這樣：
{ "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "bootstrap": "4.0.0", "jquery": "3.3.1", "popper.js": "1.12.9" } }通過保存，Visual Studio 將已經執行 NPM 來為我們安裝依賴項。它們將被安裝到
node_modules文件夾中。所以剩下要做的就是將文件從那裡獲取到我們的wwwroot文件夾中。有幾個選項可以做到這一點：
bundleconfig.json用於捆綁和縮小如文件中所述，我們可以使用多種方法之一來使用 a
bundleconfig.json進行捆綁和縮小。一種非常簡單的方法是簡單地使用BuildBundlerMinifier NuGet 包，它會為此自動設置建構任務。安裝該包後，我們需要
bundleconfig.json在項目的根目錄下創建一個包含以下內容的文件：[ { "outputFileName": "wwwroot/vendor.min.css", "inputFiles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "minify": { "enabled": false } }, { "outputFileName": "wwwroot/vendor.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ], "minify": { "enabled": false } } ]這基本上配置了哪些文件組合成什麼。當我們建構時，我們可以看到
vendor.min.cssandvendor.js.css被正確創建。所以我們需要做的就是_Layouts.html再次調整我們以包含這些文件：<!-- inside <head> --> <link rel="stylesheet" href="~/vendor.min.css" /> <!-- at the end of <body> --> <script src="~/vendor.min.js"></script>使用像 Gulp 這樣的任務管理器
如果我們想更多地進入客戶端開發，我們也可以開始使用我們將在那裡使用的工具。例如Webpack，它是一個非常常用的建構工具，適用於所有東西。但是我們也可以從像Gulp這樣更簡單的任務管理器開始，自己完成一些必要的步驟。
為此，我們在
gulpfile.js項目根目錄中添加一個，內容如下：const gulp = require('gulp'); const concat = require('gulp-concat'); const vendorStyles = [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ]; const vendorScripts = [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", ]; gulp.task('build-vendor-css', () => { return gulp.src(vendorStyles) .pipe(concat('vendor.min.css')) .pipe(gulp.dest('wwwroot')); }); gulp.task('build-vendor-js', () => { return gulp.src(vendorScripts) .pipe(concat('vendor.min.js')) .pipe(gulp.dest('wwwroot')); }); gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js')); gulp.task('default', gulp.series('build-vendor'));現在，我們還需要調整我們
package.json的依賴關係gulp和gulp-concat：{ "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "bootstrap": "4.0.0", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", "jquery": "3.3.1", "popper.js": "1.12.9" } }最後，我們編輯我們
.csproj以添加以下任務，以確保我們的 Gulp 任務在我們建構項目時執行：<Target Name="RunGulp" BeforeTargets="Build"> <Exec Command="node_modules\.bin\gulp.cmd" /> </Target>現在，當我們建構時，
defaultGulp 任務執行，它執行build-vendor任務，然後建構我們的vendor.min.css，vendor.min.js就像我們之前所做的那樣。所以_Layout.cshtml像上面這樣調整之後，我們就可以使用jQuery和Bootstrap了。雖然 Gulp 的初始設置比
bundleconfig.json上面的要復雜一些，但我們現在已經進入了 Node 世界，可以開始使用那裡的所有其他很酷的工具。所以從這個開始可能是值得的。結論
雖然這突然變得比僅使用 Bower 複雜得多，但我們也確實通過這些新選項獲得了很多控制權。例如，我們現在可以決定文件
wwwroot夾中實際包含哪些文件以及這些文件的外觀。我們還可以利用這一點，率先使用 Node 進入客戶端開發世界，這至少應該對學習曲線有所幫助。
