正如其他人已经提到的,包管理器Bower,通常用于不依赖繁重客户端脚本的应用程序中的此类依赖项,是on the way out,并积极推荐转移到其他解决方案:
..psst!在维护 Bower 的同时,我们建议将 yarn 和 webpack 用于新的前端项目!
所以虽然你现在仍然可以使用它,但Bootstrap 也已经向drop support for it 宣布了。因此,内置的 ASP.NET Core 模板也正在慢慢被编辑以远离它。
不幸的是,没有明确的前进道路。这主要是因为 Web 应用程序不断向客户端移动,需要复杂的客户端构建系统和许多依赖项。因此,如果您正在构建类似的东西,那么您可能已经知道如何解决这个问题,并且您可以扩展您现有的构建过程以简单地在其中包含 Bootstrap 和 jQuery。
但是仍然有许多 Web 应用程序在客户端不是那么繁重,应用程序仍然主要在服务器上运行,因此服务器提供静态视图。 Bower 之前通过简化发布客户端依赖项而无需太多流程来填补这一点。
在 .NET 世界中,我们也有 NuGet,并且在以前的 ASP.NET 版本中,我们也可以使用 NuGet 将依赖项添加到一些客户端依赖项,因为 NuGet 只会将内容正确地放入我们的项目中。不幸的是,使用新的.csproj 格式和新的 NuGet,已安装的包位于我们的项目之外,因此我们不能简单地引用它们。
这给我们留下了一些如何添加依赖项的选项:
一次性安装
这就是 ASP.NET Core 模板(不是单页应用程序)当前正在做的事情。当您使用它们创建新应用程序时,wwwroot 文件夹仅包含一个文件夹 lib,其中包含依赖项:
如果您当前仔细查看这些文件,您会发现它们最初是与 Bower 一起放置在那里以创建模板的,但这种情况可能很快就会改变。基本思想是将文件一次复制到wwwroot 文件夹,以便您可以依赖它们。
要做到这一点,我们可以直接按照 Bootstrap 的介绍和download the compiled files 进行操作。正如下载网站所说,这不包括jQuery,所以我们也需要单独下载;它does containPopper.js 虽然如果我们稍后选择使用bootstrap.bundle 文件——我们会这样做。对于 jQuery,我们可以简单地从 the download site 获取一个“压缩的生产”文件(右键单击链接并从菜单中选择“将链接另存为...”)。
这给我们留下了一些文件,这些文件将简单地提取并复制到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 用于捆绑和缩小
我们可以使用多种方式之一来使用bundleconfig.json 进行捆绑和缩小,如the documentation 中所述。一个非常简单的方法是简单地使用BuildBundlerMinifier NuGet package,它会自动为此设置构建任务。
安装完那个包后,我们需要在项目的根目录下创建一个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.css 和vendor.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>
现在,当我们构建时,default Gulp 任务运行,它运行 build-vendor 任务,然后像我们之前一样构建我们的 vendor.min.css 和 vendor.min.js。所以像上面一样调整我们的_Layout.cshtml之后,我们就可以使用jQuery和Bootstrap了。
虽然 Gulp 的初始设置比上面的 bundleconfig.json 稍微复杂一点,但我们现在已经进入了 Node 世界,可以开始使用那里的所有其他酷工具了。所以从这个开始可能是值得的。
结论
虽然这突然变得比仅使用 Bower 复杂得多,但我们也确实通过这些新选项获得了很多控制权。例如,我们现在可以确定 wwwroot 文件夹中实际包含哪些文件以及它们的外观。我们还可以利用这一点,率先使用 Node 进入客户端开发世界,这至少应该对一点学习曲线有所帮助。