Visual Studio 2017 ASP.NET MVC Core模板中替换Bower的方案

为什么模板取消了Bower支持？ #

其实这个变化是微软跟着前端生态的趋势走的——Bower早在2018年就被官方标记为废弃状态，维护完全停滞了。而ASP.NET Core团队在更新模板时，选择转向更主流、生态更完善的NPM（或者Yarn/PNPM）作为前端包管理工具，毕竟NPM支持的包数量更多，社区活跃度高，而且和现代前端构建工具的兼容性更好。另外，Bower的单包管理模式在复杂项目里的灵活性也远不如NPM，所以微软干脆在模板里彻底移除了Bower相关的所有支持。

Bower是否已经淘汰？ #

没错，Bower已经算是被淘汰的技术了。它的官方仓库早就停止更新，现在前端开发几乎没人再用Bower来管理包，主流的选择都是NPM、Yarn或者PNPM。如果你还在维护老项目用Bower还好，但新项目完全没必要再考虑它了。

用NPM替换Bower的最简直观方式（类似指定wwwroot/lib目录） #

要实现和Bower通过.bowerrc指定目录一样的效果，步骤非常简单，全程用NPM和简单的脚本就能搞定：

• 第一步：初始化NPM项目
  在你的ASP.NET Core项目根目录打开终端（VS里可以用“包管理器控制台”或者“终端”窗口），运行：

  npm init -y
  

  这会自动生成package.json文件，用来管理你的前端依赖。

• 第二步：安装需要的前端包
  运行下面的命令安装你需要的bootstrap、jquery等包：

  npm install bootstrap jquery jquery-validation jquery-validation-unobtrusive --save
  

  这些包会被下载到项目根目录的node_modules文件夹里。

• 第三步：配置脚本复制包到wwwroot/lib
  我们需要把node_modules里的包文件复制到wwwroot/lib，和原来Bower的目录结构一致。这里用copyfiles工具来实现：

  1. 先安装copyfiles作为开发依赖：

     npm install copyfiles --save-dev
     

  2. 打开package.json，找到scripts字段，添加一个复制脚本：

     "scripts": {
       "copy-libs": "copyfiles -u 1 node_modules/**/* wwwroot/lib/"
     }
     

     如果你想更精准地只复制需要的包（避免复制多余文件），可以改成：

     "scripts": {
       "copy-libs": "copyfiles -u 1 node_modules/bootstrap/dist/**/* node_modules/jquery/dist/**/* node_modules/jquery-validation/dist/**/* node_modules/jquery-validation-unobtrusive/dist/**/* wwwroot/lib/"
     }
     

  3. 运行脚本完成复制：

     npm run copy-libs
     

     执行后，你需要的前端包就会被复制到wwwroot/lib目录下，和原来Bower的使用方式完全一致。

• 可选：设置自动复制
  如果你不想每次安装包都手动运行脚本，可以在VS的项目属性里，添加“生成后事件命令行”：

  npm run copy-libs
  

  这样每次构建项目时，都会自动执行复制脚本，保持wwwroot/lib的内容最新。

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