# 传统的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:// ~~~