如何在.NET Core 2.1 MVC项目中用Yarn安装客户端包（弃用Bower/npm）

我完全懂你这种找不到适配新.NET Core环境清晰步骤的烦躁——尤其是不想碰那些过时的Bower、臃肿的Webpack，又嫌npm操作麻烦还没法直接把包装到wwwroot/lib里。刚好我前段时间也在非空.NET Core MVC项目里折腾过这个，下面是亲测有效的清晰步骤，帮你搞定jQueryUI和Bootstrap的安装：

前置准备 #

确保你已经在项目根目录初始化了Yarn：如果还没做，打开项目根目录的终端，运行以下命令生成package.json文件：

yarn init -y

步骤1：修改Yarn配置，让包直接安装到wwwroot/lib #

默认Yarn会把包装到node_modules，我们需要改配置让它直接输出到目标目录。在项目根目录新建一个.yarnrc文件，写入以下内容：

--modules-folder "./wwwroot/lib"

这样后续所有通过Yarn安装的包，都会直接放到wwwroot/lib下，不用手动复制文件。

步骤2：安装Bootstrap和依赖的jQuery #

jQueryUI依赖jQuery，所以先装基础依赖。在终端运行：

yarn add jquery bootstrap

执行完成后，你会看到wwwroot/lib下出现jquery和bootstrap文件夹，里面包含了编译好的css、js文件。

步骤3：正确安装jQueryUI（解决Yarn直接装jquery-ui的问题） #

直接用yarn add jquery-ui会出现文件不全、路径混乱的问题，我们要安装官方预编译的分发版本。终端运行：

yarn add jquery-ui-dist

这个包是jQueryUI官方发布的完整预编译版本，安装后会在wwwroot/lib下生成jquery-ui-dist文件夹，包含了核心js、css和主题文件。

步骤4：在MVC项目中引用资源 #

打开项目的布局文件Views/Shared/_Layout.cshtml，按以下位置添加引用：

1. 在<head>标签内引入Bootstrap的CSS：

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

2. 在</body>标签前（脚本引用区域）添加jQuery、Bootstrap JS、jQueryUI的CSS和JS：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="~/lib/jquery-ui-dist/jquery-ui.min.css" />
<script src="~/lib/jquery-ui-dist/jquery-ui.min.js"></script>

步骤5：验证安装是否成功 #

可以在Home/Index.cshtml里添加一个测试代码，验证jQueryUI是否正常工作：

<input type="text" id="datepicker" />
<script>
    $(function() {
        $("#datepicker").datepicker();
    });
</script>

运行项目后，点击首页的输入框，如果弹出日期选择器，说明所有包都安装并引用成功了。

额外小提示 #

• 后续需要更新包时，直接运行yarn upgrade jquery bootstrap jquery-ui-dist即可，Yarn会自动更新wwwroot/lib里的文件。
• 如果不想用.yarnrc全局配置，也可以在每次安装时临时指定路径：yarn add 包名 --modules-folder "./wwwroot/lib"，不过还是配置文件更省心。

内容的提问来源于stack exchange，提问作者pjbspammable