bower 是 Twitter 團隊開發的一套網頁工具，用來管理或安裝 Web 開發所需要的 Package，像是 CSS 和 JavaScript，也可以依據套件的相依性來安裝，簡單來說，開發者不用再去煩惱套件相依性問題，以及時間久了想更新最新版本，還要到各 Package 網站來下載，這些步驟都省了，一個指令就可以全部做完上述的步驟。
透過 Node.js 的 npm 工具來安裝
指令npm install bower -g
需要等上一段時間
查詢已經安裝的套件:
$ bower list
假設要安裝 jQuery 套件，請執行底下指令
$ bower install bootstrap spine jquery
執行上述指令，會列出專案安裝的套件名稱及版號
/home/www
├── backbone-amd#0.9.9
├── handlebars#1.0.0-rc.1
├── jquery#1.8.3
├── requirejs#2.1.2
└── underscore-amd#1.4.3
├── backbone-amd#0.9.9
├── handlebars#1.0.0-rc.1
├── jquery#1.8.3
├── requirejs#2.1.2
└── underscore-amd#1.4.3
移除已安裝的套件:
$ bower uninstall jquery
升級已安裝套件:
$ bower update jquery
搜尋套件:
$ bower search jquery
Bower 套件相依性
在專案目錄底下新增 component.json bower.json 檔案，裡面寫入 (或者可透過 bower init 來初始化專案)
{
"name": "xxxxx",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.3",
"backbone-amd": null,
"underscore-amd": null,
"requirejs": null
}
}
"name": "xxxxx",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.3",
"backbone-amd": null,
"underscore-amd": null,
"requirejs": null
}
}
完成存檔後，請在專案目錄底下執行 bower install，會發現所有套件都會被安裝到assets/javascript/vendor 目錄，版號的定義請按照 semver 標準。
參考文獻：http://blog.wu-boy.com/2013/01/bower-is-a-package-manager-for-the-web/
Installing Polymer
使用 bower 安裝 Polymer 0.1.1
Getting the packages
- Get the polyfill libraries:
bower install --save Polymer/platform - Get the core sugaring:
bower install --save Polymer/polymer - Get the elements:
bower install --save Polymer/polymer-elements bower install --save Polymer/polymer-ui-elements
你下完上面的指令後，該資料夾下會多出這個資料夾
bower_components/ 在資料夾創造 index.html 的檔案 內容如下:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import"
href="bower_components/polymer-ui-tabs/polymer-ui-tabs.html">
</head>
<body>
<polymer-ui-tabs selected="0">
<span>One</span><span>Two</span><span>Three</span><span>Four</span><span>Five</span>
</polymer-ui-tabs>
</body>
</html>不能直接開啟檔案 你的chrome 會檔
你必須要把他掛載到 iis 之類的
結果如下:
0 意見:
張貼留言