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

Posted 2023-03-07

【中文标题】Visual Studio 2017 ASP.NET MVC 核心模板中的 Bower 替换

【英文标题】：Bower replacement in Visual Studio 2017 ASP.NET MVC Core Template

【发布时间】：2018-09-01 21:53:44

【问题描述】：

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

引导 jquery jquery 验证 jquery-validation-unobtrusive

但不幸的是，所有 Bower 支持都消失了！不再有 bower.json、.bowerrc 和“管理 Bower 包...”：

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

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

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

【问题讨论】：

我向供应商描述了我的问题：developercommunity.visualstudio.com/content/problem/225023/…

对于客户端框架，我不明白您为什么要用 NPM 替换 Bower。要么手动添加 bower.json 以获得 Visual Studio 的支持，要么按照我的指南***.com/a/49713851/58524（在命令提示符下运行“bower init”，它将为您创建它）。

@MartinF Shawn Wildermuth 说：“Bower 已被弃用，因此对于新开发者而言”。 Bower 自己发帖：“...我们建议在前端项目中使用 Yarn 和 Webpack...” 上周我还问了 Holger Schwichtenberg 博士（德国著名专家），他确认鲍尔已经死了。

Library Manager（内置于 Visual Studio）使这变得非常容易。右键单击您的项目 > 添加 > 客户端库。结果保存到项目根目录下的 libman.json 中。

【参考方案1】：

解决办法如下：

启动 VS 2017 并从主菜单打开 Tools - Extensions and Updates 在打开的窗口中，选择左侧菜单中的Online，然后在搜索框中键入package。下载Package Installer 关闭所有 VS 实例并稍等片刻，VS 安装程序将启动并安装该软件包 安装后，启动 VS 和你应该有凉亭的项目 从菜单开始Project - Quick Install Package 选择npm并在字段中输入upgrade -g bower 前面的命令将更新 bower 包的位置。现在手动创建bower.json 文件，如下所示：
右键单击项目并添加 - 新项目 选择 JSON 文件并将其命名为 bower.json 打开文件并输入以下文件："name": "myproject" 创建另一个您只会调用的 JSON 文件.bowerrc 打开.bowerrc 文件并键入以下内容：

    "directory": "wwwroot / lib /",
    "registry": "https://registry.bower.io"

右键单击bower.json 文件并选择Manage Bower Package 选项。 在浏览部分，输入mustache.js 并安装 当您在窗口中单击“项目”时，您将看到“管理 Bower 包”

就是这样！

【参考方案2】：

以下博客对我有用，尽管它声称该问题将在 15.8 中修复，这与此问题相反：

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

我已更新 .bowerrc 文件以包括：

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

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

【参考方案3】：

Bower is actually dead.

Microsoft 有一个轻量级且目前尚未被关注的解决方案，称为 Library Manager (LibMan)。

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

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

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

如果您想在此之前尝试它，您可以从GitHub Repo 或Visual Studio Marketplace 获取它——solution to this question 中的说明

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

使用此扩展程序的原因

适用于当前未使用其他包管理器的应用 对于您认为 Bower 和 npm 过大的项目 对于不想使用 Bower 或 npm 的开发人员 适用于重视工具简单性的开发人员 用于使用自定义或私有包/文件 适用于 NuGet 无法安装内容包的 ASP.NET Core 应用

【讨论】：

我刚刚测试了“LibMan”。它最适合我的需求：在我的 .NET Web 应用程序中获取轻量级 JavaScript 包的轻量级解决方案。就像过去我们通过 NuGet 下载它们一样 :-)

所以.. 真的没有办法用 VS 15.7.5 安装 LibMan，才能使用它，必须更新到至少 15.8（最初的问题是 15.6.3） ?

有预览版 - 但为什么不直接更新？

【参考方案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/图像资产组合到单个 bundle.js、bundle.css、sprite.svg 的过程。这些应复制到wwwroot 文件夹。

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

Webpack Gulp 咕噜声

【讨论】：

Library Manager 似乎是一个更好的解决方案。

【参考方案5】：

对于 asp.net 核心项目，我建议只使用 npm 而忘记 bower，我在下面的链接中发布了使用 npm 的方法，

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

【参考方案6】：

我们发现 bower 设置起来很棘手，npm 得到很好的支持，并且可以使用 Mads Kristensen 的 Package Installer 安装包，这也适用于来自同一开发人员的 Bundler & Minifier 扩展，用于复制相关文件从 node_modules 文件夹到你想要的地方。

https://github.com/madskristensen/BundlerMinifier

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

【讨论】：

所以，我会踢鲍尔。你知道 NPM 何时进入 Visual Studio 的项目模板吗？

我必须尊重但强烈反对。为什么要使用 npm 来管理 ASP.NET 应用程序中的客户端库？它甚至没有得到很好的支持。 npm install bootstrap --save 甚至不安装引导程序的依赖项。对于包管理器来说，这是一个不可接受的失败。图书馆管理器对我来说似乎是正确的解决方案。

@user875234 我同意库管理器 (libman) 可能是可行的方法，因为 Bundler & Minifier 扩展没有得到更新。我们发现包安装程序运行良好，使用 npm 意味着所有文件都整齐地位于 node_modules 文件夹中，我们使用 BundlerMinifier 管理所有 JS 的位置，这对我们来说是一个很好的解决方案，尽管你不同意或不同意。有时它只是关于如何使用工具而不是您对它们的期望。

这个解决方案没有问题 - 经过大量研究 Libman 缺少我使用的许多库 - 使用 npm 安装然后使用 bundleconfig.json 对我来说效果很好。