从 Bower(已停产)改为使用 Yarn/Npm(.Net Core MVC)VS2017 [英] Moving away from Bower (discontinued) to use Yarn/Npm instead (.Net Core MVC) VS2017

问题描述

大约 1 年前，我开始研究 .Net Core 应用程序.我使用 .Net Core 在 Visual Studio 中设置我的项目，并使用 Bower 管理我的客户端包.bower 似乎

在上图中，我还禁用了 Bower 的钩子.这是可选的 - 我这样做是为了不让 Bower 意外安装任何软件包.

Yarn 项目设置

要将 Yarn 用于您的项目，您需要做几件事:

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

 

<代码>{}

• 确保 wwwroot 下有一个 lib 目录.

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

+ 解决方案+ 项目+ wwwroot+库+ 程序.cs+ 启动.cs+ 包.json

纱线使用/项目工作流程

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

cd [项目目录]纱线添加--modules-folder=wwwrootlib jquery纱线添加 --modules-folder=wwwrootlib bootstrap@v4.0.0

包现在安装在 wwwrootlib 下，因为这是你告诉 Yarn 安装它们的地方.

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

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

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

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

同时启用这些复选框:

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

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

所以现在你应该在 Tools 菜单下有一个 Yarn Add 项.点击它，你会得到一个要求输入参数的弹出窗口:

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

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

其他注意事项

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

I started working on a .Net Core application around 1 year ago. I used .Net Core to set up my project in visual studio and used Bower to manage my client side packages. It seems bower is being maintained/discontinued and the "people in charge" suggest using yarn or webpack instead.

So my question is how do I start using yarn instead of bower? (or npm if that is more appropriate)

When I started my project I used bower from within the Visual Studio package manager by simply by typing:

bower install <package-name>

And it managed to install the files/directories within my wwwroot/lib/ folder. I just had to add the dependency to my _Layout.cshtml and everything worked flawlessly.

<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>

I find it quite hard to figure out how to use yarn or npm to achieve the same "easyness" within Visual Studio 2017. I already have access to minifying files through the BundlerMinifier.Core NuGet package, and I believe it does it automatically for files within my , so that is not a requirement for the solution I want to use.

I have tried googling, but it seems this is not a very common problem. And all the links I found suggested using npm and set up gulp for moving files to wwwroot/lib/ and I tried that but I am getting some weird errors in doing so.

How can I use yarn to install packages with similar as I did with bower? or should I use npm instead?

解决方案

I had the same question as you and found out that Yarn is not too hard to use. Here I discuss installation of Yarn, tweaks to Visual Studio 17, and project workflow.

Yarn Installation

To run Yarn, you need to install two things:

• The prequisite, Node.js.
• The Yarn command line utility.

Disable NPM in Visual Studio 2017

Yarn uses a file in your project, package.json, to keep track of what it has installed. NPM also uses the same file. To avoid any conflicts I have disabled the NPM hooks in Visual Studio. If enabled, these hooks will cause NPM to load packages whenever package.json changes.

To disable NPM go to the Tools menu and select Options.... In the tree on the left, go to: Projects and Solutions -> Web Package Management -> Package Restore. On the right side disable the NPM hooks by changing both options to False:

In the image above I have also disabled the hooks for Bower. This is optional - I did it so as to not accidentally have Bower install any packages.

Project Setup for Yarn

To use Yarn with your project you need to do a couple of things:

• Make sure the project has a package.json file. It should be located underneath the project directory. Initially the contents of the file should contain an open bracket and close bracket:

 

{
}

• Make sure there is a lib directory under wwwroot.

The following directory structure shows an example project with these two things:

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

Yarn Usage/ Project Workflow

Here is the part you have been waiting for. First open the package manager console. The console is just a powershell console within VS. When open you will be in the solution directory, so you will need to CD into the project directory. After that you can add libraries using Yarn:

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

Packages are now installed under wwwrootlib, because that is where you are telling Yarn to install them.

Adding a Yarn Shortcut in Visual Studio 2017

If you think that the prior section involved too much typing, you can simplify things by adding a shortcut in VS. When this is set up Yarn will automatically run from the project directory, specifying the target folder. All you have to do is tell it what package to install.

Inside Visual Studio, click on the Tools > External Tools... from the menu. In the popup, click the Add button and fill out the fields as follows:

• Title: Yarn Add
  
• Command (your dir may be different): C:Program Files (x86)Yarninyarn.cmd
  
• Arguments: add --modules-folder=wwwrootlib
  
• Initial directory: $(ProjectDir)

Also enable these checkboxes:

• Use Output Window
• Prompt for arguments

Click the OK button to save the shortcut.

So now you should have a Yarn Add item under the Tools menu. Click on it and you will get a popup asking for input arguments:

All you have to do is click on the first edit box and add your package. For example, to add jquery:

Click OK on the popup and Yarn should work its magic and install your package.

Other Considerations

• I don't do Node development, so I have not considered how the above would impact it. For those who do Node development, something to try would be to use Yarn to install packages into the node_npm folder and see if things work.
• I suspect that currently there are packages that Bower can install that Yarn cannot. Hopefully over time, this gap narrows.

这篇关于从 Bower(已停产)改为使用 Yarn/Npm(.Net Core MVC)VS2017的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！