Bower 简易教程

Bower

前端套件管理

---

Bower 环境

依赖 Node.js

• node 官网
• node 中文站

---

安装 Bower

• Bower 官网

1. npm install -g bower

2. 测试 bower -v

成功就能打印出版本号

使用

1. 初始化

• 创建和打开 bower-demo 目录

  • mkdir bower-demo
  • cd bower-demo

• 初始化

  • bower init
  • 一直按 enter 直到完成
  • 生成 bower.json 文件

2. 测试

• 安装 jquery

  • 命令行 运行bower install jquery

• 安装完成

bower.json

{
  "name": "bower-demo",
  "authors": [
    "zjhcn <[email protected]>"
  ],
  "description": "学习",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

文件树

.
├── bower.json
└── bower_components
    └── jquery

• 只是单纯的安装, 不会保存依赖到 bower.json 文件中

3. 想要在 bower.json 文件中保存

• 同样的安装 jquery 加上 --save
  • 命令行 运行bower install jquery --save

bower.json

{
  "name": "bower-demo",
  "authors": [
    "zjhcn <[email protected]>"
  ],
  "description": "学习",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

安装历史版本

1. 先删除 bower_components 文件夹

2. 修改 bower.json

• 安装 jQuery v1.11.0 版本
• 使用 # 号指定版本号
  • "jquery": "#1.11.0"

{
  "name": "bower-demo",
  "authors": [
    "zjhcn <[email protected]>"
  ],
  "description": "学习",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "#1.11.0"
  }
}

1. 安装

• 运行 bower install 自动安装 bower.json 文件内的依赖

安装完成

jQuery 版本已经改为 v1.11.0

/*!
 * jQuery JavaScript Library v1.11.0
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/

---

扩展配置

1. 创建 .bowerrc 文件

{
  // 自定义存放目录
  "directory": "vendors/"
}

2. 命令行执行 bower install

文件树

.
├── bower.json
└── vendors
    └── jquery