在开发前端应用时，经常需要使用Bootstrap来快速搭建响应式的布局。然而，Bootstrap的默认实现可能会使所有使用它的网站看起来相似，并且会包含大量的CSS和JS文件，即使并没有使用到Bootstrap的所有特性。为了解决这个问题，可以使用npm和Webpack来创建一个自定义的、精简的Bootstrap包。
本文将介绍如何在.NET Core应用程序中实现这一过程，但同样的技术也可以应用于其他项目。在开始之前，请确保已经安装了Visual Studio 2017（社区版或其他版本）、.NET Core SDK 2.2和Node.js。还需要在Visual Studio 2017中安装“ASP.NET和Web开发”工作负载。
创建一个新的.NET CoreWeb应用程序后，将得到一个类似于以下的文件夹结构：
初始文件列表：
首先，删除“wwwroot/lib/bootstrap”文件夹及其所有内容和子文件夹。将不再使用它。
在Visual Studio 2017中，在项目的根目录下添加一个名为“package.json”的npm配置文件。
打开命令提示符，在项目的根目录下执行以下命令来安装将要使用的包：
npm install --save bootstrap popper.js jquery
npm install --save-dev webpack webpack-cli
npm install --save-dev sass-loader node-sass
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev uglifyjs-webpack-plugin
更新“package.json”文件，添加一个“scripts”部分，其中包含将要使用的构建捆绑文件的命令：
"scripts": {
"bootstrap-js": "webpack --mode production --progress --profile --config webpack.bootstrap.js",
"bootstrap-css": "node-sass --output-style compressed client/css/bootstrap.scss wwwroot/css/bootstrap.min.css",
"bundles": "npm run bootstrap-js && npm run boostrap-css"
}
在项目的根目录下创建一个“client”文件夹，并在“client”文件夹内创建一个“js”和“css”文件夹。
在“client/css/”下创建一个名为“_custom.scss”的文件，可以在其中覆盖Bootstrap的Sass变量来改变Bootstrap的外观和感觉：
$body-bg: #f9fbaf;
在“client/css/”下创建一个名为“bootstrap.scss”的文件，可以在其中导入Bootstrap的特定部分：
@import "custom";
@import "~bootstrap/scss/bootstrap";
在“client/js/”下创建一个名为“bootstrap.js”的文件，可以在其中包含Bootstrap的所有JavaScript或仅包含需要的部分：
import 'bootstrap';
使用Visual Studio 2017在项目的根目录下添加一个名为“webpack.bootstrap.js”的JavaScript文件：
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
bootstrap: './client/js/bootstrap.js'
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
})
]
},
output: {
filename: 'js/[name].min.js',
path: path.resolve(__dirname, 'wwwroot'),
sourceMapFilename: 'js/[name].js.map'
},
devtool: 'source-map'
};
现在，可以在项目的根目录下的命令提示符中使用以下命令来生成初始文件捆绑：
npm run bundles
可以通过编辑“client/js/bootstrap.js”、“client/css/_custom.scss”和“client/css/bootstrap.scss”文件的内容来进行自定义，然后重新运行“npmrun bundles”来重新创建捆绑文件。
还需要更新“Pages/Shared/_Layout.cshtml”文件，以引用Bootstrap文件而不是Bootstrap CDN和lib文件夹中的JavaScript和CSS文件：
<link rel="stylesheet" href="~/css/bootstrap.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="~/js/bootstrap.min.js" asp-append-version="true"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
是否需要添加或删除其他库完全取决于计划在Web应用程序中交付的内容。
如果只想交付整个Bootstrap JS并仅修改CSS，那么通过一个众所周知的CDN包含完整的JS是最佳解决方案，因为最终用户可能已经有从访问其他通过相同CDN引用它的网站时缓存的完整JS。
可以做的另一个更改是确保每次构建项目时都构建捆绑包。要做到这一点，请选择“工具”>“其他窗口”>“任务运行器资源管理器”。在任务运行器资源管理器中，应该看到“package.json”文件以及在“自定义”下创建的脚本项。右键单击“bundles”项，选择“绑定”，然后选择“构建之前”，现在每当构建项目时，捆绑包将首先被构建。然而，可能会发现构建时间有点长，如果是这样，只需回到按需构建Bootstrap文件即可。
如果想使用Azure DevOps来构建项目和Bootstrap捆绑包作为CI管道的一部分，需要采取一些步骤。