用 Bower 管理前端库

#Web

前端开发会用到很多库，比如 jQuery、Bootstrap 等，这些库不应该跟源码一起放入 Git 仓库，应该像 RPM/DEB 包一样需要时再下载，而在代码仓库中只需要维护一个包清单即可。Bower 正好就是这样的前端包管理器。

首先，在源码目录结构中创建静态资源目录：

mkdir -pv myproject/static/{css,img,js,libs}/

css、img、js 存放项目相关的样式、图片和脚本，libs 存放外部的库（或叫包）。

然后，在 .bowerrc 文件中指定包安装目录：

{
  "directory": "myproject/static/libs"
}

创建 bower.json 样板文件，然后安装包：

bower init                            # 创建 bower.json
bower install bootstrap --save        # --save 将包名保存到 bower.json
bower install "jquery#1.11.1" --save  # 安装指定版本

bower.json 中的依赖包清单：

{  
  // ...
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery" : "1.11.1"
  }
}

版本号的格式如下：

1.2.3            # semver version，指定具体版本号
1.2.3-2.3.4      # 等于 >=1.2.3 <=2.3.4
1.2              # 等于 1.2.x 或 1.2.*
1.x
~1               # 等于 1.x
~1.2             # 等于 1.2.x
~1.2.3           # 等于 >=1.2.3 <1.3.0
^1.0.0           # 等于 1.x

最后，在 .gitignore 中将 libs/ 目录忽略掉：

libs/

当然，每次 git commit 之前，还是应该用 git status 再检查一下，确认没有加入额外的文件到 Git 仓库中。

移到新环境部署，只要执行如下命令，即可自动下载并安装所有的依赖包：

bower install
← Previous Next →