Bower

前端套件管理

Bower 環(huán)境

依賴 Node.js

• node 官網(wǎng)
• node 中文站

安裝 Bower

• Bower 官網(wǎng)

1. npm install -g bower

2. 測試 bower -v

成功就能打印出版本號

使用

1. 初始化

• 創(chuàng)建和打開 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 <332124614@qq.com>"
  ],
  "description": "學(xué)習(xí)",
  "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 <332124614@qq.com>"
  ],
  "description": "學(xué)習(xí)",
  "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 <332124614@qq.com>"
  ],
  "description": "學(xué)習(xí)",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "#1.11.0"
  }
}

1. 安裝

• 運行 bower install 自動安裝 bower.json 文件內(nèi)的依賴

安裝完成

jQuery 版本已經(jīng)改為 v1.11.0

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

擴展配置

1. 創(chuàng)建 .bowerrc 文件

{
  // 自定義存放目錄
  "directory": "vendors/"
}

2. 命令行執(zhí)行 bower install

文件樹

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