摒弃Bower（已停用）改用Yarn/Npm（.Net Core MVC）VS2017

Question

摒弃Bower（已停用）改用Yarn/Npm（.Net Core MVC）VS2017

npmasp.net-core-mvcvisual-studio-2017boweryarnpkg

43

大约一年前我开始开发一个 .Net Core 应用程序。我使用 .Net Core 在 Visual Studio 中设置了我的项目，并使用 Bower 来管理客户端软件包。然而，看起来 bower 已经被维护/停止维护，"负责人"建议改用 yarn 或 webpack.

所以我的问题是如何使用 yarn 替代 bower?（如果更合适的话可以考虑使用 npm）

在开始我的项目时，我通过在 Visual Studio 包管理器中简单地输入以下命令来使用 bower:

bower install <package-name>

它成功地安装了文件/目录到我的wwwroot/lib/ 文件夹中。我只需要将其作为依赖项添加到我的_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>

我觉得使用yarn或npm在Visual Studio 2017中实现相同的“易用性”相当困难。通过BundlerMinifier.Core NuGet包，我已经可以压缩文件，并且我相信它会自动为我的文件进行压缩处理，因此这不是我想要使用的解决方案必需的。

我试着搜索了一下，但似乎这不是一个很普遍的问题。我找到的所有链接都建议使用npm并设置gulp将文件移动到wwwroot/lib/，我尝试了一下，但在这样做时出现了一些奇怪的错误。

我应该如何像使用bower那样使用yarn安装软件包？或者我应该改用npm？

- Zeliax

3个回答

3

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

Webpack是一个专门用于构建客户端Web资源并将其与依赖项捆绑在一起的工具。

如果您不需要此功能，请继续为旧项目使用bower或Nuget。对于新项目，请使用Webpack和yarn/npm。

- Martin

2

在我看来，更容易的选项是使用yarn，并使用rc文件指定要将软件包安装到哪个文件夹中。以下是操作步骤：

从yarn网站下载yarn到您的计算机上，如果使用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"
    }
}

首先在项目中创建一个.yarnrc文件，可以在visual studio中添加一个新的文本文件来创建，文件名应该是".yarnrc"，不需要后缀.txt。项目会自动将.yarnrc文件添加在package.json下方，然后在rc文件中添加以下内容：

--modules-folder wwwroot/lib

无需引号。

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

- Adam

我已经尝试了使用.yarnrc的解决方案，似乎它已经将modules文件夹中包含的所有内容（很多东西）复制到了我的wwwroot/lib目录下。 - LeoFraietta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chue x · Accepted Answer

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

Yarn安装

要运行Yarn，您需要安装两个东西：

必备条件，Node.js。
Yarn命令行实用程序。

禁用Visual Studio 2017中的NPM

Yarn使用项目中的一个文件package.json来跟踪它安装了什么。NPM也使用相同的文件。为避免任何冲突，我已在Visual Studio中禁用了NPM hooks。如果启用这些hooks，则每当package.json更改时，NPM会加载软件包。

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

在上面的图像中，我还禁用了Bower的hooks。这是可选的 - 我这样做是为了不会意外安装任何软件包。

配置Yarn项目

要在您的项目中使用Yarn，您需要完成以下几件事情：

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

{
}

确保在wwwroot目录下有一个lib文件夹。

以下目录结构展示了具有这两个内容的示例项目：

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

使用 Yarn / 项目工作流程

这就是您一直在等待的部分。首先打开包管理器控制台。该控制台只是 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中，从菜单中点击 Tools > External Tools...。在弹出窗口中，按以下方式填写字段并单击Add按钮：

Title: Yarn Add
Command (your dir may be different): C:\Program Files (x86)\Yarn\bin\yarn.cmd
Arguments: add --modules-folder=wwwroot\lib
Initial directory: $(ProjectDir)

还要启用这些复选框：

Use Output Window
Prompt for arguments

单击OK按钮以保存快捷方式。

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

您只需要单击第一个编辑框并添加您的包即可。例如，要添加jquery：

在弹出窗口中单击OK，Yarn应该可以魔法般地安装您的包。

其他考虑事项

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