在 Visual Studio 2017 15.7 中使用 Bower 管理前端框架

1. 关于 Bower 管理器

Bower 是 Twitter 推出包管理工具。其特点是可以管理包含HTML、CSS、JavaScript、字体甚至图像文件。Bower 并不会执行其它操作，仅仅是安装所需软件包的正确版本及其依赖项。

但遗憾的是，Bower 长期以来作为 Visual Studio 的前端框架管理工具，已经被抛弃了。在 Bower 官网上建议使用 Yarn 来替代 Bower 管理软件包。具体可参见【如何从 Bower 迁移】。

但在微软似乎不采用 Yarn 而是计划在 vs v15.8 版本中，使用 LibMan 来替代 Bower 进行获取包。

可惜的是 LibMan 目前只能在 vs v15.8 Preview 3 以上版本才能使用，如果你的 vs 满足版本要求，并且你的项目不需要其他工具（如Node，npm，Gulp，Grunt，WebPack等），并且您只想获取几个文件，那么你可以直接使用 LibMan，具体教程请进入传送门。

由于 vs 目前已无法直接使用 bower，接下来将讲述如何手动打开 bower 管理器。

2. Bower 的安装

在安装 Bower 前，请安装它的以下依赖组件：

• nodejs
• git

安装完成后打开 CMD 执行以下语句在全局中安装 Bower：

npm install -g bower

安装完成后可执行以下命令验证是否安装成功：

bower -v

3. 在项目中初始化 Bower

在 Visual Studio 中建立 ASP.NET Core Web 应用程序。

首先你可以看到依赖项内没有 Bower 管理，在项目右键也发现无管理 Bower 程序包选项。

此时我们打开 CMD。切换到项目目录内（包含 *.csproj 的文件夹）。输入以下命令初始化 Bower （请不要使用 PowerShell ）:

bower init

命令行会出现一些要你填写的信息，可以直接回车。

此时我们看 Visual Studio 的界面，已经出现 Bower 管理工具，并且相对应的还出现 bower.json 。

4. 配置外部工具

此时虽然你已能看到 Bower 管理工具，但你依然会发现在安装 / 还原包时会出现错误，此时我们应该配置外部工具。右击 Bower -> 配置外部工具。

添加三个路径：

• nodejs 安装目录路径
• Git 安装目录下的 bin 文件夹路径
• AppData 中 npm 的路径

示例如下，具体按照自己实际情况改，并勾选上：

D:\Program Files\nodejs
D:\Program Files\Git\bin
C:\Users\赖俊成\AppData\Roaming\npm

此外，去除以下位置的勾选：

$(VSINSTALLDIR)\Web\External

最终效果如下：

确定并重启 Visual Studio 。至此，你已可以正常使用 Bower 管理器了。
##5. 修改默认位置
你会发现，虽然你已可以正常下载包了，但它默认包的位置在 bower_components 文件夹中。此时，我们需要修改默认位置。

在 CMD 输入以下命令创建 .bowerrc 文件：

type null > .bowerrc

此时在 vs 里就能发现 .bowerrc 文件。

打开 .bowerrc 文件并编辑以下内容后保存：

{
  "directory": "wwwroot/lib"
}

此时重新还原 Bower 程序包，则可正常使用。

---

版权声明：本文由赖俊成编辑并发布，在注明作者、来源、以及确保文章完整性的前提下，允许完整转发。