我想在ASP中更新 bootstrap .NET内核与NuGet.我用了这个:
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项,但我现在如何将其添加到我的项目中?本地NuGet依赖项的路径是什么?
我想在ASP中更新 bootstrap .NET内核与NuGet.我用了这个:
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项,但我现在如何将其添加到我的项目中?本地NuGet依赖项的路径是什么?
正如其他人已经提到的,package manager Bower通常用于不依赖大量客户端脚本的应用程序中的依赖项,它是on the way out,并积极建议转移到其他解决方案:
所以,尽管你现在仍然可以使用它,Bootstrap也宣布了drop support for it.因此,内置的ASP.NET Core模板也在慢慢地被编辑以远离它.
不幸的是,没有明确的前进道路.这主要是因为web应用程序不断深入客户端,需要复杂的客户端构建系统和许多依赖项.因此,如果您正在构建类似的东西,那么您可能已经知道如何解决这个问题,并且您可以扩展现有的构建过程,只需在其中包含 bootstrap 和jQuery.
但是仍然有很多web应用程序在客户端没有那么重,应用程序仍然主要在服务器上运行,因此服务器提供静态视图.Bower之前通过简化发布客户端依赖项的过程来填补这一空白.
在教室里.NET世界我们还有NuGet和以前的ASP.NET版本,我们也可以使用NuGet向一些客户端依赖项添加依赖项,因为NuGet只会将内容正确地放入我们的项目中.不幸的是,使用新的.csproj
格式和新的NuGet,安装的软件包位于我们的项目之外,因此我们不能简单地引用这些软件包.
这给我们留下了几个如何添加依赖项的 Select :
这就是ASP.NET核心模板不是单页应用程序,目前正在进行.当您使用这些来创建新的应用程序时,wwwroot
文件夹只包含一个包含依赖项的文件夹lib
:
如果仔细查看当前的文件,可以看到它们最初是与Bower一起放置在那里创建模板的,但这很可能很快就会改变.其基本思想是将文件once复制到wwwroot
文件夹中,以便您可以依赖它们.
要做到这一点,我们可以简单地遵循Bootstrap的介绍,直接使用download the compiled files.正如下载网站上提到的,这不包括jQuery,所以我们也需要单独下载;不过,如果我们 Select 稍后使用bootstrap.bundle
文件,我们会这样做.对于jQuery,我们只需从the download site中获取一个"压缩的生产"文件(右键单击链接并 Select "将链接另存为…"从菜单中).
这就给我们留下了一些文件,这些文件只需提取并复制到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或yarn;在我的示例中,我将使用npm.
首先,我们需要为我们的项目创建一个package.json
文件,这样我们就可以指定我们的依赖项.为此,我们只需从"Add New Item"对话框执行此操作:
一旦我们有了它,我们需要编辑它以包含我们的依赖项.应该是这样的:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
通过保存,VisualStudio将已经运行NPM来为我们安装依赖项.它们将被安装到node_modules
文件夹中.所以剩下要做的就是把这些文件放到wwwroot
文件夹中.有几个选项可以做到这一点:
bundleconfig.json
for bundling and minification我们可以使用多种方式之一来使用bundleconfig.json
进行Bundle 和缩小,如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>
如果我们想更多地进入客户端开发,我们也可以开始使用我们在那里使用的工具.例如,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,率先进入客户端开发领域,这至少有助于a bit的学习曲线.