前端依賴包管理-bower

下面的內容淺顯易懂，適合初級前端工程師觀看

此篇主要內容是講，如何使用WebStorm控制檯下載、刪除依賴包，和npm，bower一些指令的使用方法。

學習這篇文章前，須要將node.js先安裝好。

地址：http://nodejs.cn/

通常來講前端開發工做中，或多或少會用到一些依賴包，之前的開發人員若是要用的話，就獲得網上處處找，而後下各類插件，極大浪費了時間，而且刪除的時候也麻煩。

後來twitter推出了bower，它主要是一個包管理工具，簡單來講就是一個靜態資源共享平臺。前端須要用到的插件基本均可以在裏面下載，這就極大方便了開發。

因而咱們就從下載bower開始吧。

1.打開WS，點擊圖中標記處，打開控制檯

2.輸入npm install -g bower 敲回車

npm       nodejs安裝包管理器

install     安裝

-g           全局（安裝）

bower      依賴包的名稱

[問題：開始我打 npm install -g bower 的時候  說 npm command not found ！

 回答：都說了要裝node.js才能往下學習啦！！！]

這是我輸入之後控制檯返回的信息

意思是我已經安裝過了，因此我如今須要把它刪除，而後從新下

這裏插一下刪除安裝包的方法

3.輸入npm rm -g bower （這樣個人bower就被刪除了）

rm   remove（移除）的意思

而後我再從新步驟1（重複部分就不上圖了）完成後，輸入bower init

會提示你輸入一些基本信息，根據提示按回車或者空格便可，而後會生成一個bower.json文件，用來保存該項目的配置。

而後bower就安裝好了！

下面就能夠開始下安裝包了，好比人見人誇的angular

angular我已經下過了，

因此仍是老辦法，我得先刪除，因此先看看怎麼刪除依賴包

--save 意思就是要將這個文件連同json文件中的也一塊兒刪乾淨，否則下次你重載bower它但是還會回來的！

下面即是個人json文件，能夠看出個人依賴包只有jQuery和select2，沒有angular，說明刪乾淨了噢！

如今開始下載angular

控制檯輸入bower install --save angular ，如圖，這樣angular就下好了。

--save  （將它加入到json文件中）

 

 

如果對bower 和 insta指令很感興趣。能夠在控制檯中輸入bower i -h或npm i -h，會出現不少指令的使用方法，供你參考學習。

D:\開發\WebstormProjects\demo>bower i -h

Usage:

bower install [<options>]
bower install <endpoint> [<endpoint> ..] [<options>]

Options:

-F, --force-latest Force latest version on conflict
-f, --force If dependencies are installed, it reinstalls all installed components. It also forces installation even when there are non-bower directories with the same name in the components directory. Also bypasses
the cache and overwrites to the cache anyway.
-h, --help Show this help message
-p, --production Do not install project devDependencies
-S, --save Save installed packages into the project's bower.json dependencies
-D, --save-dev Save installed packages into the project's bower.json devDependencies
-E, --save-exact Configure installed packages with an exact version rather than semver
Additionally all global options listed in 'bower help' are available

Description:

Installs the project dependencies or a specific set of endpoints.
Endpoints can have multiple forms:
- <source>
- <source>#<target>
- <name>=<source>#<target>

Where:
- <source> is a package URL, physical location or registry name
- <target> is a valid range, commit, branch, etc.
- <name> is the name it should have locally.

 

D:\開發\WebstormProjects\demo>npm i -h

npm install (with no args, in package dir)
npm install [<@scope>/]<pkg>
npm install [<@scope>/]<pkg>@<tag>
npm install [<@scope>/]<pkg>@<version>
npm install [<@scope>/]<pkg>@<version range>
npm install <folder>
npm install <tarball file>
npm install <tarball url>
npm install <git:// url>
npm install <github username>/<github project>

alias: npm i
common options: [--save|--save-dev|--save-optional] [--save-exact]

D:\開發\WebstormProjects\demo>