# 傳統的JS庫環境搭建 * 直接到某某網站下載XX.js然后拷貝過來使用 # 現在的JS庫環境搭建 * 使用包管理體系 # 前端項目開發常用的包管理體系 * git-bash+nodeJs+bower # 安裝git-bash【項目版本管理系統】 * 直接雙擊安裝即可，注意自己windows操作系統的位數 # nodeJs【JavaScript解釋器引擎】 #### 安裝nodeJs【前提是你必須安裝了git-bash】 * 直接雙擊安裝即可，注意自己的windows操作系統的位數 #### npm包管理器 * [NPM包官網查詢，有包的介紹](https://www.npmjs.com) * 由于網絡原因，因此需要給nodeJs的npm包管理器做一個國內鏡像的設置,打開C:\Program Files\nodejs\node\_modules\npm\npmrc文件，然后追加一個倉庫地址 ```js prefix=${APPDATA}\npm registry = http://registry.cnpmjs.org ``` #### npm包管理器基本命令使用 * npm help：查看幫助命令 * npm -v：查看npm安裝的版本 * npm root：查看當前包的安裝路徑 * npm root -g：查看全局的包的安裝路徑 * npm install moudleName -g ：將node模塊安裝到全局環境中 * npm uninstall moudleName -g ：卸載全局環境中node模塊 * npm list -g --depth 0 :查看已經安裝的全局模塊 * npm view moduleNames：查看node模塊的package.json文件夾 * npm view moudleName dependencies：查看的依賴關系 * npm view moduleName repository.url：查看的源文件地址 * npm view moduleName engines：查看所依賴的Node的版本 * npm info moduleName ：查看模塊詳細信息，已經所有版本號 #### npm包管理器安裝 * 直接安裝模塊的時候會安裝最新 * 安裝需要的版本【使用@號書寫版本】 ```js npm install -g cnpm@xx.xx.xx ``` #### 安裝cnpm為全局模塊【因為使用淘寶的鏡像會更加快】 * 安裝cnpm【全局】【最新版本】 ```js npm install -g cnpm ``` * 安裝cnpm【全局】【倉庫直接指向國內鏡像】 ```js npm install cnpm -g --registry=https://registry.npm.taobao.org ``` * 以后就使用cnpm來安裝全局模塊，不再使用npm安裝全局模塊了 #### 安裝bower為全局模塊【前端依賴管理工具】【bower沒有全局的概念只有項目的概念】 * 安裝bower ```js cnpm install -g bower ``` #### 使用bower * help 顯示Bower命令的輔助信息 * init 交互式的創建bower.json文件 * install 安裝一個本地的包 * uninstall 刪除一個包 * update 更新一個包 * search 根據包名搜索一個包 * info 指定包的版本信息和描述 * link 包目錄的符號連接 * list, ls 列出所有已安裝的包 * lookup 根據包名查詢包的URL * register 注冊一個包 * cache-clean 清除Bower的緩存，或清除指定包的緩存 * completion Bower的Tab鍵自動完成 * 版本號選擇使用\#號，而不是@號 #### 安裝angularJS庫 * 創建你的項目 * 安裝之前，先看看angularJS包的信息 ```js bower info angular ``` * 進入項目根目錄，開始初始化bower【提示輸入的問題，可以一路回車，也可以認真對待】【如果沒有bower.json文件，那么將會創建一個新的 bower.json文件 】 ```js bower init ``` * 安裝angular1.2.18版本，并且需要記住依賴（這個很重要，因為以后直接就可以把bower.json文件拷貝給別人，別人就可以直接bower install 然后自動下載該項目依賴的所有包了） ```js bower install angular#1.2.18 --save ``` * 看一看bower.json文件 ```js "name": "hh", "authors": [ "hzj <hzjlltj3@163.com>" ], "description": "", "main": "", "license": "MIT", "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "angular": "1.2.18" } } ``` * 看看項目，你會發現多了一個目錄  #### 使用bower的自己的配置文件 * Bower的配置文件是.bowerrc,使用JSON格式進行描述。 ```js { "directory": "libs/", "analytics": false, "timeout": 120000, "registry": { "search": [ "https://bower.herokuapp.com" ] } } ``` * 優化Bower下載速度 ~~~ git config --global url."https://".insteadOf git:// ~~~