Visual Studio 2017 ASP.NET MVC 核心模板中的 Bower 替换

Question

最近我使用 Visual Studio 2017 (15.6.3) 从头开始创建了一个 ASP.NET MVC Core 项目。我发现了通常的 JavaScript 框架：

bootstrap
jquery
jquery-验证
jquery-验证-不显眼

但不幸的是所有 Bower 支持都消失了！没有 bower.json，没有 .bowerrc，也没有 "Manage Bower Packages..."：

Visual Studio 的 ASP.NET MVC 核心模板有什么问题？ Bower 过时了吗？

如果 Bower 已弃用，请不要将此问题复制到 How to use bower packages in Visual Studio 2017！我不喜欢指向已弃用技术的修复程序。

我想缩小问题的范围：用 NPM 替换 Bower 的最简单（最直观）的方法是什么？ 就像 Bower 用其 .bowerrc 所做的那样：{ "directory": "wwwroot/lib" }?

Answer 1

我们发现 bower 很难安装，npm 得到很好的支持，可以使用 Mads Kristensen 的 Package Installer 安装软件包，这也适用于 Bundler & Minifier 扩展，来自同一开发人员，用于复制node_modules 文件夹中的相关文件到您想要的位置。

https://github.com/madskristensen/BundlerMinifier

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller

Answer 2

我建议坚持使用 npm 而忘记 asp.net 核心项目的 bower，我在下面的 link 中发布了使用 npm 的方法，

How to use yarn in ASP.Net core MVC to install bootstrap in wwwroot folder

Answer 3

Bower is actually dead.

Microsoft 有一个轻量级的解决方案，目前处于雷达之下，称为 Library Manager (LibMan)。

这是一个精简的基于 json 的解决方案，具有非常简单的 UI - 让您可以控制要下载的文件（当您只需要一个文件时不再需要下载数百个文件）。

Mads Kristensen did a great little intro to the preview at Build 2017. （视频应该在 43 分钟左右的正确位置开始）。

在撰写本文时，它仍处于预览阶段 - 但将与 Visual Studio 15.8 一起发布。

如果您想在此之前尝试一下，可以从 GitHub Repo or Visual Studio Marketplace - instructions in the solution to this question

中获取

您仍然可以使用 npm 等 - 尽管这是 Microsoft 改用（或同时使用）的原因 - 来自 Visual Studio Marketplace：

Reasons for using this extension

For apps not currently using another package manager

For projects where you think Bower and npm are overkill

For developers that don't want to use Bower or npm

For developers that values simplicity in their tools

For using custom or private packages/files

For ASP.NET Core apps where NuGet can't install content packages

Answer 4

鲍尔死了。 bower 团队指的是 Yarn（NPM 的一个补充）。

因为 Visual Studio 有一些 NPM 支持，所以我会去做。

在项目的根目录中创建一个 package.json（为此，右键单击项目，添加项目并搜索 NPM。您将找到一个 npm Configuration File）：

{
  "name": "SomeName",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "jquery-ajax-unobtrusive": "3.2.4",
  }
}

每次更改 json 文件时，只需按 CTRL + S。 Visual Studio 自动调用 NPM 并恢复包。另请注意，您对包名称和版本号有智能。

自己迁移后，我不记得在 npm 上找不到包。但如果你是这种情况，请注意 you can reference a github repository directly.

依赖项保存到 node_modules 文件夹。那是给新的包管理器的。

现在您遇到了问题，您需要将其捆绑发布（您也应该使用 Bower 完成此操作）。捆绑是将您的 Javascript/CSS/Image 资产合并为单个 bundle.js、bundle.css、sprite.svg 的过程。这些应该被复制到 wwwroot 文件夹。

为此，我们有几个选择（我只会 link 几个，因为这会扩大问题的范围）：

Webpack
Gulp
咕噜

Answer 5

以下博客对我有用，尽管它声称该问题将在与此问题相反的 15.8 中得到解决：

https://blogs.msdn.microsoft.com/webdev/2018/07/05/workaround-for-bower-version-deprecation/

我更新了 .bowerrc 文件以包含：

"registry": "https://registry.bower.io"

然后我右键单击 bower.json 和恢复包。然后瞧！

Answer 6

解决方法如下：

启动 VS 2017 并从主菜单打开 Tools - Extensions and Updates
在打开的 window 中，左侧菜单中的 select Online 并在搜索框中键入 package。下载 Package Installer
关闭所有 VS 实例并稍等片刻，VS 安装程序将启动并安装该包
安装完成后，启动VS和你应该有一个bower的项目
从菜单Project - Quick Install Package开始
Select npm 并在字段

upgrade -g bower

前面的命令将更新 bower 包的位置。现在手动创建 bower.json 文件，如下所示：
1. 右键单击项目并添加 - 新项目
2. Select JSON 文件并将其命名为 bower.json
3. 打开文件并输入以下文件：{"name": "myproject"}
4. 创建另一个 JSON 您将只调用的文件 .bowerrc
5. 打开 .bowerrc 文件并输入以下内容：
```
{
    "directory": "wwwroot / lib /",
    "registry": "https://registry.bower.io"
}
```
右键单击 bower.json 文件和 select Manage Bower Package 选项。
在浏览部分，键入 mustache.js 并安装
当您单击 window 中的项目时，您将看到管理 Bower 包

就这些！

Visual Studio 2017 ASP.NET MVC 核心模板中的 Bower 替换

Bower replacement in Visual Studio 2017 ASP.NET MVC Core Template

asp.net-mvc

visual-studio

visual-studio-templates

bower

asp.net-core