远离Bower(已停产)使用Yarn/Npm(.Net Core MVC)VS2017

Question

我大约1年前开始研究.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.CoreNuGet包访问缩小文件了,我相信它会自动为我的文件中的文件做到,所以这不是我想要使用的解决方案的要求.

我试过谷歌搜索,但似乎这不是一个非常普遍的问题.我找到的所有链接建议使用npm并设置gulp来移动文件wwwroot/lib/,我尝试了但是我在这样做时遇到了一些奇怪的错误.

我如何使用yarn与我相似的方式安装软件包bower？或者我应该使用npm？

Answer 1

我和你有同样的问题,发现纱线不太难用.在这里,我将讨论Yarn的安装,Visual Studio 17的调整以及项目工作流程.

纱线安装

要运行Yarn,您需要安装两件事:

• 该prequisite,Node.js的.
• 的纱线命令行实用程序.

在Visual Studio 2017中禁用NPM

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

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

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

纱线的项目设置

要在项目中使用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中添加纱线快捷方式

如果您认为前一部分涉及太多的输入,您可以通过在VS中添加快捷方式来简化操作.设置完成后,Yarn将自动从项目目录运行,指定目标文件夹.您所要做的就是告诉它要安装什么包.

在Visual Studio中,单击菜单中的工具 > 外部工具.... 在弹出窗口中,单击" 添加"按钮并按如下所示填写字段:

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

同时启用这些复选框:

• 使用输出窗口
• 提示参数

单击" 确定"按钮以保存快捷方式.

所以现在你应该在工具菜单下有一个纱线添加项目.单击它,您将获得一个要求输入参数的弹出窗口:

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

单击弹出窗口上的确定,Yarn应该发挥其魔力并安装您的包.

其他考虑因素

• 我不做Node开发,所以我没有考虑上面会如何影响它.对于那些进行Node开发的人来说,可以尝试使用Yarn将软件包安装到node_npm文件夹中,看看是否有用.
• 我怀疑目前Bower可以安装Yarn不能安装的软件包.希望随着时间的推移,这种差距会缩小.