Node.js

Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行時(shí)。

Node.js 并不是運(yùn)行在瀏覽器里的一個(gè)庫(kù)或框架。

Node.js 可以提供了一系列服務(wù)端能力，如 HTTP 服務(wù)、讀寫(xiě)本地文件等，開(kāi)發(fā)者可以利用 JavaScript 來(lái)使用這些能力，因?yàn)榍岸碎_(kāi)發(fā)者的主要語(yǔ)言就是 JavaScript，所以利用 Node.js 可以降低學(xué)習(xí)成本，讓前端開(kāi)發(fā)者更容易接觸到服務(wù)端開(kāi)發(fā)。

1. 安裝 Node.js

Node.js 需要單獨(dú)安裝，進(jìn)入 Node.js 官網(wǎng) 獲取對(duì)應(yīng)平臺(tái)的安裝包下載即可。

如果是為了學(xué)習(xí)使用，建議使用最新版，支持更多的特性。

Node.js 的安裝過(guò)程和普通軟件相似，安裝完畢后可以通過(guò)命令行測(cè)試是否安裝成功。

1.1 windows 下打開(kāi)命令提示符

windows 下可以直接在開(kāi)始中進(jìn)行搜索，搜索命令提示符，打開(kāi)搜索結(jié)果。

打開(kāi)后在命令提示符中輸入 node -v 并回車(chē)，如果有正確輸出安裝的 Node.js 的版本號(hào)，則表示安裝成功。

1.2 Mac OS 下打開(kāi)終端

在 Mac OS 操作系統(tǒng)下，打開(kāi) 聚焦搜索 ，輸入 終端 后回車(chē)即可打開(kāi)終端。

打開(kāi)終端后輸入 node -v，如果正確輸出了版本號(hào)，則表示安裝成功。

因?yàn)閮蓚€(gè)平臺(tái)下的命令幾乎一致，后續(xù)內(nèi)容不再區(qū)分平臺(tái)，統(tǒng)一使用 Mac OS 下的終端。

2. npm

Node.js 安裝后，會(huì)同時(shí)安裝 npm，和查看 Node.js 的版本一樣，在終端里輸入 npm -v，即可查看到 npm 的版本號(hào)。

npm -v

npm 的全稱是 Node Package Manager，翻譯過(guò)來(lái)就是 node.js 的包管理工具。

一個(gè)項(xiàng)目開(kāi)發(fā)過(guò)程中需要許多第三方的代碼，比如一些框架，這些框架大部分都會(huì)被做一個(gè) npm 包 發(fā)布，通過(guò) npm 命令行工具就可以安裝到本地項(xiàng)目中，進(jìn)行使用。

同樣的可以自己開(kāi)發(fā)一些 包，發(fā)布到 npm，然后造福社會(huì)。

2.1 創(chuàng)建一個(gè)包

一個(gè) npm 包 由一個(gè) package.json 文件描述。

package.json 所在的位置通常會(huì)被作為項(xiàng)目的根目錄。

可以通過(guò) npm 提供的命令創(chuàng)建一個(gè) package.json，可以先創(chuàng)建一個(gè)項(xiàng)目目錄，然后在終端中進(jìn)入到這個(gè)目錄，使用 npm init -y 命令，就可以創(chuàng)建一個(gè)最簡(jiǎn)單的 package.json。

當(dāng)然現(xiàn)在的工程化的前端項(xiàng)目，也會(huì)用 package.json 來(lái)描述項(xiàng)目信息，來(lái)管理依賴、工作里等，一個(gè)包不一定要發(fā)送到 npm 上。

2.2 package.json 簡(jiǎn)析

package.json 中有許多項(xiàng)目，描述了不同的信息。

這里介紹幾個(gè)常用的字段。

2.1.1 devDependencies

{
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-decorators": "^7.3.0"
  }
}

devDependencies 記錄了一些開(kāi)發(fā)依賴，這些依賴在生產(chǎn)環(huán)境不會(huì)使用。

如一些代碼檢查工具，因?yàn)橹挥性陂_(kāi)發(fā)、編譯階段需要檢查代碼，最終跑上線的代碼已經(jīng)在運(yùn)行了，不需要再進(jìn)行語(yǔ)法、規(guī)范檢查。

2.1.2 dependencies

"dependencies": {
  "md5": "^2.2.1"
}

dependencies 記錄了生產(chǎn)、開(kāi)發(fā)環(huán)境都會(huì)用到的依賴。

如 jquery，這樣實(shí)實(shí)在在跑在項(xiàng)目里，支撐起項(xiàng)目功能的依賴。

2.1.3 scripts

{
  "scripts": {
    "dev": "echo \"development\""
  }
}

scripts 可以說(shuō)是直接接觸到的最常用的一個(gè)配置項(xiàng)。

配置 script 可以完成一些簡(jiǎn)單的工作流，或者把復(fù)雜的命令配置為一個(gè)別名。

如配置的 dev 項(xiàng)，就可以通過(guò)在終端輸入 npm run dev 來(lái)調(diào)用。

同時(shí) script 還提供了前置和后置鉤子，具體可以參閱文檔。

3. 體驗(yàn) Node.js

知道了 npm 和 node.js 的關(guān)系，了解了 package.json 的作用，就可以來(lái)嘗試使用 Node.js 做應(yīng)用了。

3.1 讀寫(xiě)文件

在終端使用 node js文件.js 就可以使用 Node.js 執(zhí)行 .js 文件。

在 Node.js 中，處理文件需要使用 fs 模塊。這個(gè)模塊是 Node.js 自帶的，可以直接引入。

首先創(chuàng)建一個(gè) .js 文件，然后在同級(jí)目錄下，創(chuàng)建任意的文本文件。

// app.js
var fs = require('fs');

var text = fs.readFileSync('./text.txt', 'utf-8');

console.log(text);

寫(xiě)完這三行代碼，保存后就可以去終端執(zhí)行代碼了。

fs 模塊的 readFileSync 方法，表示可以同步的讀取一個(gè)文件，然后將讀取到的文件放在 text 變量中。

隨后將讀取到的文件進(jìn)行輸出。

fs 文件非常重要，一些特殊的配置文件，如 YAML 配置文件，就需要 fs 模塊讀取，在或者是靜態(tài)資源，也需要用 fs 模塊讀取或者寫(xiě)入。

fs 模塊通過(guò) require 引入，Node.js 支持 commonjs規(guī)范，通過(guò) commonjs規(guī)范 來(lái)處理模塊。

新版的 Node.js 已經(jīng)支持 ES Module，需要修改 package.json 中的 type 選項(xiàng)為 module。

3.2 使用 npm 包

md5 是很常用的加密算法，但通常又不可能自己去實(shí)現(xiàn)一遍，快速迭代的項(xiàng)目可以 拿來(lái)主義，有現(xiàn)成的方案直接拿來(lái)用。

在 npm 上有一個(gè) md5 包，就可以拿來(lái)計(jì)算 md5。

首先在一個(gè)空目錄創(chuàng)建一個(gè) package.json，用來(lái)描述項(xiàng)目信息，然后安裝 md5。

npm init -y

npm i md5

然后新建一個(gè) .js 文件，嘗試著使用 md5 這個(gè)包。

// app.js
var md5 = require('md5');

var password = '123456';

var encode = md5(password);

console.log(encode);

安裝好的包直接通過(guò) require 引入，然后跟著包的文檔使用即可。

4. 小結(jié)

Node.js 目前生態(tài)主要集中在前端工具上，大眾的前段工程化的解決方案，都是由 Node.js 來(lái)驅(qū)動(dòng)完成。

作為前端開(kāi)發(fā)者，基礎(chǔ)的使用 Node.js 已經(jīng)是必備技能，許多針對(duì)項(xiàng)目的自動(dòng)化的流程工具，都需要前端開(kāi)發(fā)者自己動(dòng)手實(shí)現(xiàn)。