Bower的安裝與基本使用

PrototypeZ 發布于2019-07-01 10:14 / 573人閱讀

摘要：安裝依賴于和，如果要使用它需要先安裝和，因為包含，所以只需要安裝即可。安裝配置文件作用類似于，執行時會依據這個配置文件更新庫配置文件必須，如果需要注冊包，則該包名唯一。

Bower是什么東西？

一個前端包管理工具。能夠幫我們管理Web站點上的各種框架，類庫等等。主要作用有如下：能夠幫助我們跟蹤前端包，并且保證他們是最新（或者是你指定的特定版本），Bower能夠管理前端里面的HTML,CSS,JS，甚至還可以是圖片。Bower還有一個最大的好處，它對我們前端進行了優化。如果多個包依賴于一個包，例如jQuery，那么Bower將只下載jQuery一次，這樣就稱為扁平依賴，它有助于減少頁面加載。

簡言之就是用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。

安裝

bower依賴于node.js和npm，如果要使用它需要先安裝node.js和npm，因為node.js包含npm，所以只需要安裝node.js即可。

1.Node安裝（若已安裝可跳過）：

Windows 安裝包(.msi)
32 位安裝包下載地址 : https://nodejs.org/dist/v4.4....
64 位安裝包下載地址 : https://nodejs.org/dist/v4.4....

CentOS安裝：

獲取源碼，解壓，編譯安裝，配置變量修改權限,編譯文件，檢查版本
cd /usr/local/src/
wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz
tar zxvf node-v0.10.24.tar.gz
cd node-v0.10.24
./configure --prefix=/usr/local/node/0.10.24
make
make install
vim /etc/profile
設置nodejs環境變量，在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 一行的上面添加如下內容:
#set for nodejs
export NODE_HOME=/usr/local/node/0.10.24
export PATH=$NODE_HOME/bin:$PATH

//重編譯生效
source /etc/profile
//檢查是否安裝成功
node -v

2.Bower安裝：

npm install bower –g

初始化

bower init

安裝、更新、卸載依賴包

bower install
如：bower install jQuery#1.2

bower update
bower unstall

清理緩存

bower cache clean

查詢

bower search 包名

注冊包

先去github上面建立一個庫（項目）（公有，私有都行）或者其他，只要能讓bower.com能訪問到地址應該都可以。
比如建立了一個叫做angualr-demo的庫，然后加入bower init來管理這個庫。

bower install ngDemo 安裝

Bower配置文件(bower.json)

作用類似于composer.json，執行bower install時會依據這個配置文件更新庫

bower.json配置文件
{
"name":"",              //必須，如果需要注冊包，則該包名唯一。
"description":"",       //可選，包描述
"main":[],              //可選，入口文件，bower本身不使用，供第三方構建工具會使用
//每種文件類型只能有一個。
"ignore":[],            //可選，文件或目錄列表。bower安裝的時候將忽略該列表中的文件。
//bower是從git倉庫或壓縮包下載一個包，里面的文件并不一定全部需要。
"dependencies":[],      //依賴包，name:value，value可以是包的semver       
//range(版本號范圍)，也可以直接是一個包的git地址或壓縮包地址。
"devDependencies":[],   //開發依賴包，僅僅在開發過程中測試或者編譯文檔用，部署生產環境是不需要。
//格式和dependencies 相同
"resolutions":[],       //包引用沖突自動使用該模塊指定的包版本
//格式和dependencies 相同
"overrides" :[          //這個也很關鍵，可以覆蓋一個包中的默認設置，比如main里面設定的入口文件
"package-name":{    //這樣可以根據需要，讓第三方工具只打包需要的文件。
"main":[]
        }
    ],                     
"moduleType":"",        //可選，指定包采用那種模塊化方式(globals,amd,node,es6,yui)
"private":Boolean,      //是否公開發布當前包,如果只是使用bower來管理項目的包，設置為true.
"license":"",           //授權方式(GPL-3.0,CC-BY-4.0.....)
"keywords":[],          //可選，方便注冊后容易被其他人搜索到。
"authors":[],           //作者列表
"homepage":[],          //主頁，包介紹頁
"repository":{          //包所在倉庫。
"type": "git",
"url": "git://github.com/foo/bar.git"
    },
｝

.bowerrc

.bowerrc文件是用來配置bower本身的一些默認配置的

如，bower install 安裝，默認會安裝到當前目錄下，要修改該安裝位置，則需要編輯.bowerrc文件

新建.bowerrc文件
{
    "directory":"public/bower_components"
}

GPU云服務器云服務器 hbase的安裝與使用 mysql數據庫的安裝與使用 mysql安裝與使用 hadoop安裝與使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/28952.html

Bower的安裝與基本使用

摘要：安裝依賴于和，如果要使用它需要先安裝和，因為包含，所以只需要安裝即可。安裝配置文件作用類似于，執行時會依據這個配置文件更新庫配置文件必須，如果需要注冊包，則該包名唯一。 Bower是什么東西？一個前端包管理工具。能夠幫我們管理Web站點上的各種框架，類庫等等。主要作用有如下：能夠幫助我們跟蹤前端包，并且保證他們是最新（或者是你指定的特定版本），Bower能夠管理前端里面的HTML,C...

livem 2019-08-22 18:23 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

LeexMuller 2019-08-28 18:22 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

KevinYan 2019-08-01 14:56 評論0 收藏0