Node.js 相关整理

简介

Node.js®️ is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem(生态系统), npm, is the largest ecosystem of open source libraries in the world.

这段话是 Node.js 官网对于 Node.js 的描述。其中提到了几个比较重要的东西：

• Chrome's V8 JavaScript engine: 这个开源引擎是用 C++ 写的，应该是比较快吧，其实就是一个 Javascript 的解释器包括了几个集成的模块。部分 node 的模块也是用 C++ 写的，所以不是很需要担心速度的问题。
• event-driven, non-blocking I/O model: 事件驱动非阻塞 I/O 模型（比较像状态机？），Node 实现了一个 event 模块来处理事件，就是 EventEmitter 类，Node 中很多的类都是继承自此。
• npm: Node.js package manager，Node.js 官方的包管理系统，主要用于 Node 项目的依赖管理，还可以定义一些环境变量，或者给某些插件传递参数。所有的 npm 配制信息都在项目根目录下的 package.json 文件中，后面的例子中会提到简单的用法，其他更多的用法和细节可以查看 npm 文档。
• open source: 开源虽然会导致代码质量的参差不齐，但是在解决某一问题时会十分有效。建议在有些非关键的小步骤中多使用开源的东西，而不是自己造无意义的轮子。
• world: 英语水平 is !important.

Node.js 的安装

浏览器打开 Node.js 官网可以看到大大的 Download，下载下来、解压就好了。对于 mac、win 用户可以自动安装，linux 服务端用户可以使用 wget 命令获取到压缩包，tar 命令解压，ln 命令将 bin 目录下的 node 于 npm 链接（建议软链接）到/usr/local/bin 目录，或将 bin 目录加到环境变量下。
安装成功后在控制台运行以下命令：

node -v
#v6.3.1

npm -v
#3.10.3

不报错就表示安装成功了。

Node.js 可以做什么

Node.js 实际上是运行在本地的 Javascript，封装了大部分常用的文件系统操作，封装了 TLS/SSL、socket 等较为底层的库，也提供了 http 库供后端人员使用。在第三方库 express 的支持下，更是给服务端开发指了一条新路。它虽然不能在浏览器上运行，但是却在开发环境下大放异彩。

web 开发流程优化

大部分人最开始接触 web 开发时，都觉得 HTML 是世界上最好写的语言，结构清晰而且跑起来好看。然而正式学习前端了之后才发现，不止 HTML、css、js 有多个版本，浏览器更是有海量个版本。这里推荐给大家一个网站 caniuse，顾名思义，这个网站就是看某一个关键字或者函数的兼容性情况。话说回来，在如此多的浏览器中，想要同一段代码的行为相同是一件极其棘手的事情。

用 css 举例，不同的浏览器对 CSS3 的属性前缀支持不同，每次写带前缀的属性时都要连着写四个几乎相同的句子（-webkit-、-moz-、-ms-、）。这在版本迭代时是很容易出现问题的。npm 中的一个库 autoprefixer 就完美地解决了这个问题。下面给大家一个例子顺便简单地介绍一下 npm 的操作。

npm install autoprefixer -g

有兴趣看一下 npm 源码可以知道，npm 实际上是用 node 编写的一个脚本。install 是 npm 的安装命令，可以简写为 i，对应的 remove 命令简写为 r。install 命令会在当前目录创建一个 node_modules 文件夹（如果不存在的话），并下载 npm 服务器上对应的包到此目录。node_module 目录下会有一个叫做 .bin 的子目录，会有下载的 node 模块中的可执行文件。-g 参数会将包安装到“global”中，也就是个人目录下，这样就可以在 sh 中直接调用已安装的包。注意：-g 命令需要一定目录权限，linux／mac 下可能需要 sudo。

回到正题，下面是一个未加前缀的 CSS 文件：

/*styles.css*/
.some-pig {
  transform: scale(5);
}

在 bash 中调用：

autoprefixer-cli styles.css

再打开 styles.css 会发现自动加上了一条带前缀属性。

不只是 css 的前缀，包括 less 以及 sass 等 css 扩展也有对应的包来处理。

甚至对于 Javascript 本身，都能使用 node 将高版本 js“编译”成低版本 js，这就涉及到了十分流行的 babel。babel 是一个令人热血澎湃的项目，它使得程序员可以使用所有先进的 js 语言特性，而不被语言版本的兼容性掣肘。现在前端最流行的框架 react 使用的 jsx 语法，就是需要用 babel 这种转化成浏览器能识别的 js 语法。

npm 上更有像 gulp、webpack 这种一条龙服务的工具，让前端的开发更加“舒坦”。当然，这些工具的学习是需要一定时间代价的，不过对于英语好的我（呵呵）来说都是小事。在它们的帮助下，我可以动态的将本地的文件改变直接提现在浏览器的调试页面中，免去了刷新、缓存的痛苦。

babel、webpack 的用法我会在之后的博客中进行总结。

简易服务器

许多人都用过一个叫做 SimpleHTTPServer 的 python 包，用在简单的测试上时非常爽。node 中也有一个 http 服务的模块，第三方封装成了一个叫做 express 的框架。这个框架的扩展性极强，而且上手简单，非常适合写简单的服务端。甚至只用不到 10 行就能配出一个静态文件服务器（当然，如果只是静态文件服务器的话可以使用 http-server 包）：

npm i express --save

--save 命令会将安装的包的信息插入到 package.json 中，只有在 package.json 中的包才能在代码中调用。

var express = require("express");		// 刚刚安装的express包
var path = require("path");			// node集成的路径处理模块

var app = new express();
app.use(express.static(path.join(__dirname, "static")));
app.listen(1234);

这段代码其实看起看很简单，就是监听 1234 端口，可以通过 http 访问 static 目录下的所有文件。其中 require 函数就是加载包的方法，正如前文所说，只有在 package.json 中指明的包才能被 node 定位到，所以安装时一定要记得加上--save 参数。express 的用法我会之后进行简单的总结。

异想天开

html 调试的“奇葩方法”——browsersync：它实际上是一个 http 服务器，在 html 中注入一段脚本来对 dom 进行调试，并且可以同步多个测试的行为，用起来真的爽。

本地跑的 web——node-webkit：它将谷歌浏览器内核与 node 相整合，使得在 html 中的 script 中可以跑 node 代码！也就是说不需要 http 请求服务器，服务器返回信息再渲染，可以直接在 script 标签中查询数据库！

Next-

接下来我会介绍一些常见的 node 库：

• babel
• webpack 等前端构建的库
• express
• browser-sync
• node 集成的一些库