离开 Bower（已停产）转而使用 Yarn/Npm (.Net Core MVC) VS2017

Question

大约 1 年前，我开始开发 .Net Core 应用程序。我使用 .Net Core 在 visual studio 中设置我的项目，并使用 Bower 管理我的客户端包。 bower 似乎是 being maintained/discontinued 而 "people in charge" 建议改用 yarn 或 webpack。

所以我的问题是如何开始使用 yarn 而不是 bower？（或者 npm，如果更合适的话）

当我开始我的项目时，我在 Visual Studio 包管理器中使用了 bower，只需键入：

bower install <package-name>

它成功地在我的 wwwroot/lib/ 文件夹中安装了 files/directories。我只需要将依赖项添加到我的 _Layout.cshtml 中，一切都完美无缺。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
    asp-fallback-test="window.jQuery">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>

我发现很难弄清楚如何在 Visual Studio 2017 年内使用 yarn 或 npm 来实现相同的 "easyness"。我已经可以通过 BundlerMinifier.Core 访问缩小文件NuGet 包，我相信它会自动为我的中的文件执行此操作，因此这不是我要使用的解决方案的要求。

我试过谷歌搜索，但这似乎不是一个很常见的问题。我发现的所有链接都建议使用 npm 并设置 gulp 以将文件移动到 wwwroot/lib/ 我试过了但是我在这样做时遇到了一些奇怪的错误。

如何使用 yarn 来安装与 bower 类似的软件包？还是应该改用 npm？

Answer 1

Yarn 和 npm 非常相似。您可以使用 yarn 或 npm 来实现完全相同的目标，即安装节点包。这类似于 bower 之前为您所做的，除了 bower 将它们添加到您的项目 Web 资产而不是 node_modules。

WebPack 是一个纯粹用于构建客户端 Web 资产并将它们与依赖项捆绑在一起的工具。

如果您不需要这样做，请继续对遗留项目使用 Bower 或 Nuget。对于新项目，使用 WebPack 和 yarn/npm。

Answer 2

我和你有同样的问题，发现 Yarn 并不难用。在这里，我讨论 Yarn 的安装、对 Visual Studio 17 的调整和项目工作流程。

纱线安装

为了运行 Yarn，你需要安装两个东西：

先决条件，Node.js。
Yarn command line utility.

在 Visual Studio 2017 年禁用 NPM

Yarn 在您的项目中使用一个文件 package.json 来跟踪它已安装的内容。 NPM 也使用相同的文件。为了避免任何冲突，我在 Visual Studio 中禁用了 NPM 挂钩。如果启用，这些挂钩将导致 NPM 在 package.json 更改时加载包。

要禁用 NPM，请转到工具菜单和 select 选项...。在左侧的树中，转到：项目和解决方案 -> Web 包管理 -> 包还原.在右侧，通过将两个选项更改为 False:

来禁用 NPM 挂钩

在上图中，我还禁用了 Bower 的挂钩。这是可选的 - 我这样做是为了不小心让 Bower 安装任何包。

Yarn 的项目设置

要在您的项目中使用 Yarn，您需要做几件事：

确保项目有一个 package.json 文件。它应该位于项目目录下。最初文件的内容应包含左括号和右括号：

{
}

确保 wwwroot 下有一个 lib 目录。

以下目录结构显示了包含这两件事的示例项目：

+ Solution
    + Project
        + wwwroot
            + lib
        + Program.cs
        + Startup.cs
        + package.json

纱线使用/项目工作流程

这是您一直在等待的部分。首先打开包管理器控制台。控制台只是 VS 中的一个 powershell 控制台。打开时，您将位于解决方案目录中，因此您需要 CD 进入项目目录。之后你可以使用 Yarn 添加库：

cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib bootstrap@v4.0.0

包现在安装在 wwwroot\lib 下，因为这是您告诉 Yarn 安装它们的地方。

在 Visual Studio 2017 年添加 Yarn 快捷方式

如果您认为前面的部分涉及太多打字，您可以通过在 VS 中添加快捷方式来简化事情。设置好后，Yarn 会自动从项目目录运行指定目标文件夹。您所要做的就是告诉它要安装什么包。

在 Visual Studio 中，单击菜单中的工具 > 外部工具...。在弹出窗口中，单击添加按钮并填写以下字段：

标题：纱线添加
命令（您的目录可能不同）：C:\Program Files (x86)\Yarn\bin\yarn.cmd
参数：添加--modules-folder=wwwroot\lib
初始目录：$(ProjectDir)

同时启用这些复选框：

使用输出Window
提示参数

点击确定按钮保存快捷方式。

所以现在你应该在 Tools 菜单下有一个 Yarn Add 项。单击它，您将看到一个弹出窗口，要求输入参数：

您所要做的就是单击第一个编辑框并添加您的包裹。例如，添加 jquery:

在弹出窗口中单击“确定”，Yarn 应该会发挥它的魔力并安装您的包。

其他注意事项

我不做 Node 开发，所以我没有考虑上面的内容会如何影响它。对于那些做 Node 开发的人来说，可以尝试使用 Yarn 将包安装到 node_npm 文件夹中，然后看看是否可以正常工作。
我怀疑目前有一些包 Bower 可以安装而 Yarn 不能。希望随着时间的推移，这种差距会缩小。

Answer 3

在我看来，一个更简单的选择是使用 yarn 并使用 rc 文件指定要将包安装到的文件夹。操作方法如下：

从 yarn's site 下载纱线到您的计算机上，如果使用 Windows.
创建一个 package.json 或通过命令行在项目的根目录下键入“yarn init”（如果键入“yarn init”，它会询问一些信息以帮助格式化 package.json 文件）。注意 package.json 文件的 engines 部分指定了 yarn 引擎：

{
    "version": "1.0.0",
    "dependencies": {
    "bootstrap": "4.1.3",
    "popper.js": "1.14.3",    
},
    "engines": {
    "yarn": ">= 1.0.0"
    }
}

然后在visual studio里面添加一个新的文本文件到项目中创建一个.yarnrc文件，文件的全名应该是".yarnrc"后没有.txt，项目会自动添加package.json 下的 .yarnrc 文件，然后将以下内容添加到 rc 文件中：

--modules-folder wwwroot/lib

无需引号。

然后只需在项目根文件夹中打开命令行并键入“yarn”，所有包就会安装到 .yarnrc 文件中指定的文件夹中。

离开 Bower（已停产）转而使用 Yarn/Npm (.Net Core MVC) VS2017

Moving away from Bower (discontinued) to use Yarn/Npm instead (.Net Core MVC) VS2017

npm

bower

asp.net-core-mvc

yarnpkg

visual-studio-2017