如何在ASP.Net Core MVC中使用Yarn将Bootstrap安装至wwwroot文件夹

我来帮你搞定这个从Bower转Yarn的小难题！Yarn和Bower的工作逻辑确实不一样——Yarn默认把依赖包安装在项目根目录的node_modules里，而VS的解决方案资源管理器默认是隐藏这个文件夹的（点一下顶部的「显示所有文件」按钮就能看到它了）。但我们最终要把Bootstrap的可用文件放到wwwroot，下面给你几个实用的方法：

方法一：手动复制（临时应急用） #

如果只是临时用一下，直接找到node_modules/bootstrap/dist目录下的css、js文件夹，手动复制到wwwroot/lib/bootstrap目录下就行。不过这种方式不适合长期用，每次更新Bootstrap都得重复操作，太麻烦。

方法二：用npm/Yarn脚本实现自动复制（推荐） #

Yarn兼容npm的脚本功能，我们可以在package.json里加一个复制命令，一键完成文件转移：

1. 打开项目根目录的package.json，如果没有scripts字段就新增一个，添加复制命令：
   • 如果你用Windows系统：

     "scripts": {
       "copy-bootstrap": "xcopy /E /I /Y \"node_modules\\bootstrap\\dist\" \"wwwroot\\lib\\bootstrap\""
     }
     

     这里的xcopy参数：/E复制所有子目录，/I自动创建目标文件夹，/Y覆盖文件不提示。
   • 如果你用Mac/Linux系统：

     "scripts": {
       "copy-bootstrap": "cp -r node_modules/bootstrap/dist/* wwwroot/lib/bootstrap/"
     }
     

2. 打开命令行，运行yarn run copy-bootstrap，就能自动把Bootstrap的dist文件复制到wwwroot对应的目录里了。
3. 还可以把安装和复制合并成一条命令：yarn add bootstrap@4.0.0-alpha.6 --dev && yarn run copy-bootstrap，装完包直接完成复制。

方法三：用Gulp做前端构建（适合复杂场景） #

如果你的项目有更多前端构建需求（比如压缩、合并文件），用Gulp更灵活：

1. 先安装Gulp和复制插件：yarn add gulp gulp-copy --dev
2. 在项目根目录创建gulpfile.js，写入以下代码：

   const gulp = require('gulp');
   const copy = require('gulp-copy');
   
   gulp.task('copy-bootstrap', function() {
     return gulp.src('node_modules/bootstrap/dist/**/*')
       .pipe(copy('wwwroot/lib/bootstrap', { prefix: 3 }));
   });
   

3. 运行yarn run gulp copy-bootstrap就能完成复制，还可以扩展watch任务，当Bootstrap文件更新时自动同步到wwwroot。

另外提一句：如果你以后想更贴合ASP.NET Core的生态，微软官方推荐用LibMan（Library Manager）来管理前端库，它可以直接把包安装到wwwroot，不过既然你已经选择了Yarn，上面的方法完全能满足你的需求～

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