基于nodejs的开发环境搭建

一、前言

由于项目打算使用bower对前端开发的包进行管理而bower 是基于 nodejs 开发的，所以这里顺带介绍Node.js的简单概念

1、Node.js简介

Node.js是让Javascript脱离浏览器运行在服务器的一个平台，不是语言；

Node.js采用的Javascript引擎是来自Google Chrome的V8；

Node.js运行在浏览器外不用考虑Javascript兼容性问题

Node.js采用单线程、异步IO与事件驱动的设计来实现高并发（异步事件也在一定程度上增加了开发和调试的难度）；

Node.js内建一个HTTP服务器，所以对于网站开发来说是一个好消息；

2、bower简介

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。

包管理工具一般有以下的功能：

• 注册机制：每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配，所以包管理工具需要维护注册信息，可以依赖其他平台。
• 文件存储：确定文件存放的位置，下载的时候可以找到，当然这个地址在网络上是可访问的。
• 上传下载：这是工具的主要功能，能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了，不用到处找下载。上传并不是必备的，根据文件存储的位置而定，但需要有一定的机制保障。
• 依赖分析：这也是包管理工具主要解决的问题之一，既然包之间是有联系的，那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。

详细介绍请参考：

bower官网 http://bower.io/

3、grunt简介

grunt是一款前端的管理构建工具，可以帮你处理一些需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化工作。正确配置好了任务后，任务运行器就会自动帮你完成大部分无聊的工作。

详细介绍请参考：

grunt官网 http://gruntjs.com/ 

grunt中文社区 http://www.gruntjs.net/ （http://www.gruntjs.org）

二、Node.js安装

1、windows环境下安装

1）下载Node.js的安装程序node-v0.10.33-x64.msi（32位系统则下载node-v0.10.33-x86），当前最新稳定版为v0.10.33。

2）按照正常的软件安装步骤安装msi文件，安装完成后会自动将nodejs的环境变量node和npm添加到windows系统环境变量中，如若没有，可手动设置系统环境变量：

在系统变量path中添加“D:\ProgramFiles\nodejs\”即可（我电脑中Node.js的安装路径为D:\ProgramFiles\nodejs\，请根据实际情况修改）

3）若修改了安装路径（默认为：C:\Program Files\nodejs），则在命令行首次使用npm命令时，会出现如下错误信息

Error: ENOENT, stat 'C:\Users\Administrator\AppData\Roaming\npm'

这是由于C:\Users\Administrator\AppData\Roaming\路径下没有npm文件夹造成的，创建该文件夹即可解决

4）安装好Node.js后即可在控制台使用node、npm命令，通过过node -v 查看nodejs 版本，npm -v查看npm版本以检验Node.js是否安装成功或环境变量是否配置正确

三、Node.js简单使用

1、npm命令使用

1. 使用npm install 安装的插件目录：插件将会在当前路径下的node_module文件夹下创建一个新的文件夹，该新文件夹的名称便是插件的名称。
2. 使用npm install安装时，在node_module目录下的.bin文件夹中还会产生一个和插件名相同的bat文件，作为控制台的命令使用，在使用该命令时，需要加上命令的相对路径或绝对路径
3. 使用npm install -g全局安装时：插件会安装在设定好的系统目录（如win7下管理员用户默认路径为C:\Users\Administrator\AppData\Roaming\npm）下的node_module文件夹中创建一个与插件同名的文件夹
4. 建议使用全局安装，既可同意管理插件，也能方便全局使用
5. 可以通过npm config list 查看npm的配置信息
6. 可以通过npm config set prefix "E:\AppData\npm"将默认的全局安装路径改为自定义的目录，如果这里修改了，同时也要将系统中的用户变量path=C:\Users\Administrator\AppData\Roaming\npm也改为E:\AppData\npm（这里的E:\AppData\npm 表示一个自定义目录，可根据实际情况修改）

2、bower安装

npm install -g bower

使用npm安装时，建议进入某个项目中指定路径下进行安装。也可以加上参数-g，进行全局安装，方便多处调用。

安装完成后，检查./node_modules/.bin目录下是否有 bower.bat文件，若没有说明bower未成功安装，请检查bower安装过程是否有报错信息；

3、grunt安装

通过npm install 命令安装grunt和bower：

npm install -g grunt

四、bower简单使用

1、用bower安装插件

我们以jquery为例，简单看下如何使用bower

通过控制台进入指定的目录，输入如下命令：

bower install -g jquery

注1：由于bower需要通过git获取插件，因此，在使用bower命令前，需要安装好git，否则会报错：

注2：如果下载命令没有使用全局安装（使用的npm install jquery），那么当bower安装完成后，运行命令时需要带上所在目录的路径，如：

node_modules\.bin\bower install bootstrap

除了bower install这种下载方式外，还有其它多种方式

1）直接下载 git 库

bower install git://github.com/components/jquery.git

2）github 的别名，自动解析成 git 库

bower install components/jquery (same as above)

3）下载线上的任意文件

bower install http://foo.com/jquery.awesome-plugin.js

4）下载本地库

bower install ./repos/jquery

如果只是下载的话是不需要配置文件的。

2、配置文件

每个包应该有一个配置文件，描述包的信息，bower 的配置文件为 component.json。

{      "name" :  "myProject" ,      "version" :  "1.0.0" ,      "main" :  "./path/to/main.css" ,      "dependencies" : {          "jquery" :  "~1.7.2"      } }

name 和 version 描述包的名称和版本，dependencies 描述这个包依赖的其他包。main 指定包中的静态文件，可以为一个数组。

除了包的配置文件，bower 还有一个全局的配置文件(~/.bowerrc)。

{      "directory"  :  "components" ,      "json"  :  "component.json" ,      "endpoint"  :  "<a href="https://bower.herokuapp.com/" "="" style="color: rgb(50, 108, 166); text-decoration: none; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">https://bower.herokuapp.com" ,      "searchpath"  : [ "<a href="https://bower.herokuapp.com/" "="" style="color: rgb(50, 108, 166); text-decoration: none; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">https://bower.herokuapp.com" ] }

directory 为 install 时生成的目录，json 指定配置文件的名称。

endpoint 指定 bower server，用于储存包的信息，默认是 bower 官方的，也可以自己搭建 bower server。可以通过 register 命令将包信息注册到 endpoint 上。

searchpath 可以指定一系列的 bower server，但是只是用于查询。首先查询 endpoint，如果没有再按顺序查询 searchpath。

3、项目中使用

给自己的项目添加一个 component.json 配置文件，执行 bower install，bower 会将依赖的包下载到 components 的目录下。

如果依赖的包还依赖其他包，bower 也会下载到本地，直到把所有依赖的包都下载完成。bower 中所有的包都在同级目录下。

如果想查看有哪些包和文件，可执行 bower list --path。比如 安装了 flight，可以看到以下信息

{      "es5-shim" :  "components/es5-shim" ,      "flight" :  "components/flight/lib/index.js" ,      "jquery" :  "components/jquery/jquery.js" }

现在就可以使用了，在当前目录建一个页面，script 嵌入需要的 js，如果想对 js 做模块化管理可使用 seajs。