Bower前端套件管理工具

2014-12-24 203 words One minute

Contents

Bower 是什麼？

Bower 是一套專為前端開發設計的套件管理工具，由 Twitter 開發，用來管理 HTML、CSS、JavaScript 等前端相依套件。類似後端的 npm 或 pip，Bower 讓開發者可以透過指令安裝、更新、移除前端函式庫（如 jQuery、Bootstrap、Font Awesome 等），不需手動下載 zip 或管理版本。

基本指令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


# 安裝 Bower（需要先安裝 Node.js 與 npm）
npm install -g bower

# 初始化專案，建立 bower.json
bower init

# 安裝套件
bower install jquery

# 安裝特定版本
bower install jquery#2.2.4

# 安裝並記錄到 bower.json（--save）
bower install bootstrap --save

# 列出已安裝套件
bower list

# 更新套件
bower update

# 移除套件
bower uninstall jquery

bower.json 說明

bower.json 記錄了專案的前端相依套件，類似 npm 的 package.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "^3.6.0",
    "bootstrap": "^4.6.0"
  },
  "devDependencies": {
    "jasmine": "^3.0.0"
  }
}

安裝的套件預設放在 bower_components/ 資料夾中。

Bower 與 npm 的差異

比較項目	Bower	npm
設計目標	前端套件（瀏覽器用）	後端 + 前端通用
相依套件結構	扁平化（flat）	巢狀（nested，npm v3+ 也扁平化）
設定檔	`bower.json`	`package.json`
安裝位置	`bower_components/`	`node_modules/`

Bower 已被棄用

Bower 官方已於 2017 年宣布不再積極維護，建議開發者遷移至以下現代替代方案：

現代替代方案

npm / yarn：現在是前端套件的主流管理工具，搭配 Webpack、Vite 等打包工具使用。
CDN 引入：對於簡單專案，可直接使用 cdnjs、jsDelivr 等 CDN 服務。

1
2
3
4
5


# 使用 npm 安裝 jQuery（現代做法）
npm install jquery

# 在 JS 中引入
import $ from 'jquery';

如果你是在維護舊專案才會接觸到 Bower，新專案建議直接使用 npm + 打包工具的工作流程。