我想用NuGet更新ASP.NET Core中的Bootstrap。我使用了这个:
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项,但我现在如何将其添加到我的项目中?本地NuGet依赖项的路径是什么?
正如其他人已经提到的,包管理器Bower,通常用于像这样不依赖大量客户端脚本的应用程序的依赖性,是在路上并积极建议转移到其他解决方案:
...psst!虽然Bower被维护,但我们推荐新的前端项目使用yarn和webpack! 因此,尽管你现在仍然可以使用它,但Bootstrap也已经宣布放弃对它的支持。因此,内置的ASP.NET Core模板也在慢慢地被编辑,以摆脱它。 不幸的是,目前还没有明确的前进道路。这主要是由于网络应用正不断地进一步向客户端发展,需要复杂的客户端构建系统和许多依赖性。所以,如果你正在构建这样的东西,那么你可能已经知道如何解决这个问题了,你可以扩展你现有的构建过程,简单地把Bootstrap和jQuery也包含在那里。 但仍有许多Web应用没有那么重的客户端,应用仍然主要在服务器上运行,服务器因此而提供静态视图。Bower之前填补了这一点,它让我们很容易就能发布客户端的依赖关系,而不需要那么多的过程。 在.NET世界中,我们也有NuGet,对于以前的ASP.NET版本,我们也可以使用NuGet来添加一些客户端的依赖,因为NuGet只是把内容正确地放到我们的项目中。不幸的是,在新的
.csproj
格式和新的NuGet中,安装的包位于我们项目之外,所以我们不能简单地引用这些包。 这就给我们留下了一些如何添加依赖项的选择:一次性安装
这就是ASP.NET Core模板,那些不是单页的应用程序,目前正在做。当你使用这些模板来创建一个新的应用程序时,
"中添加以下块:wwwroot
文件夹只是包含了一个lib
文件夹,其中包含了依赖关系: 如果你仔细观察目前的文件,你可以看到它们最初是用Bower放在那里来创建模板的,但这可能很快就会改变。基本的想法是,这些文件被**一次复制到wwwroot
文件夹中,这样你就可以依赖它们了。 要做到这一点,我们可以简单地按照Bootstrap的介绍,直接下载编译的文件。正如下载网站上提到的,它不包括jQuery,所以我们也需要单独下载;但如果我们选择使用bootstrap.bundle
文件的话,它确实包含Popper.js--我们会这样做。对于jQuery,我们可以简单地从下载网站获得一个单一的 "压缩、生产 "文件。 这给我们留下了几个文件,我们可以简单地解压并复制到wwwroot
文件夹中。我们还可以建立一个lib
文件夹,以便更清楚地表明这些是外部依赖: 这就是我们所需要的,所以现在我们只需要调整我们的_Layout.cshtml
文件以包括这些依赖项。为此,我们在"
<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>
并在"
"的最后添加以下块:<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或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
进行捆绑和最小化,如文档中所解释的。一个非常简单的方法是简单地使用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.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>
如果我们想更多地进入客户端开发,我们也可以开始使用在那里会用到的工具。例如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客户端开发世界的第一步,这至少对学习曲线有一些帮助。
不幸的是,你很难用NuGet在.NET Core项目上安装Bootstrap(或其他大多数JavaScript/CSS框架)。如果你看一下NuGet的安装,它会告诉你这是不兼容的:
如果你一定要知道本地软件包的依赖性在哪里,它们现在在你的本地配置文件目录中。即%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts
。
不过,我建议改用npm,或者bower--就像Saineshwar的回答那样。