第1章 NodeJS

如果你是一個(gè)前端程序員，你不懂得像PHP、Python或Ruby等動(dòng)態(tài)編程語(yǔ)言，然后你想創(chuàng)建自己的服務(wù)，那么Node.js是一個(gè)非常好的選擇。如果你熟悉Javascript，那么你將會(huì)很容易的學(xué)會(huì)Node.js。

1.1 NodeJS簡(jiǎn)介

Node.js 是一個(gè)基于 Chrome V8 JavaScript 引擎 構(gòu)建的開(kāi)源、跨平臺(tái)運(yùn)行時(shí)環(huán)境。V8 引擎是即 Google Chrome 的核心。這使 Node.js 的性能非常出色。V8引擎允許開(kāi)發(fā)者使用 JavaScript 編寫服務(wù)器端代碼，而不是僅僅局限于瀏覽器中的前端開(kāi)發(fā)。

Node.js 是運(yùn)行在服務(wù)端的 JavaScript，是一個(gè)事件驅(qū)動(dòng)I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非?？?，性能非常好。

NodeJS官網(wǎng)：https://nodejs.org/zh-cn

1.2 NodeJS下載

打開(kāi)官網(wǎng)中的下載頁(yè)面，選擇一個(gè)合適的版本下載安裝包，然后雙擊安裝：

安裝過(guò)程：點(diǎn)擊下一步…下一步…默認(rèn)安裝即可。

NodeJS歷史版本下載：https://nodejs.org/dist/

安裝完畢后，打開(kāi)cmd窗口，輸入node -v查看node的版本。

1.3 Node基礎(chǔ)入門

1.3.1 控制臺(tái)輸出

我們現(xiàn)在做個(gè)最簡(jiǎn)單的小例子，演示如何在控制臺(tái)輸出，創(chuàng)建文本文件demo01.js，代碼內(nèi)容：

var a=1;
var b=2;
console.log(a+b);

我們?cè)诿钐崾痉螺斎朊?/p>

node demo01.js

1.3.2 使用函數(shù)

創(chuàng)建文本文件demo02.js

function add(a,b){
    return a+b;
}
var c=add(100,200);
console.log(c);

命令提示符輸入命令

node demo2.js

運(yùn)行后看到輸出結(jié)果為300

1.4 NodeJS模塊化編程

模塊是Node.js 應(yīng)用程序的基本組成部分，文件和模塊是一一對(duì)應(yīng)的。換言之，一個(gè) Node.js 文件就是一個(gè)模塊，這個(gè)文件可能是JavaScript 代碼、JSON 或者編譯過(guò)的C/C++擴(kuò)展。

將一個(gè)復(fù)雜的程序文件依據(jù)一定規(guī)則（規(guī)范）拆分成多個(gè)文件的過(guò)程稱之為模塊化，其中拆分出的每個(gè)文件就是一個(gè)模塊 ，模塊的內(nèi)部數(shù)據(jù)是私有的，不過(guò)模塊可以暴露內(nèi)部數(shù)據(jù)以便其他模塊使用。

創(chuàng)建文本文件demo03_01.js

exports.add=function (a,b){
    return a+b;
}

創(chuàng)建文本文件demo03_2.js

// 導(dǎo)入demo03_1模塊,類似于Java中的對(duì)象
var demo= require('./demo03_01');
// 通過(guò)"對(duì)象名"調(diào)用方法
console.log(demo.add(400,600));

我們?cè)诿钐崾痉螺斎朊?/p>

node demo03_02.js

結(jié)果為1000

1.5 NodeJS內(nèi)置模塊

Node.js 作為一個(gè) JavaScript 的運(yùn)行環(huán)境，其官方提供了非常多的的內(nèi)置模塊，這些內(nèi)置模塊就和Java中的核心API一樣，為NodeJS提供了很多基礎(chǔ)功能，我們可以通過(guò)require()將這些模塊導(dǎo)入到當(dāng)前的JS文件中。

• fs：文件系統(tǒng)模塊。
  • fs.writeFile(file, data[, options], callback)：文件寫入
  • fs.readFile(path[, options], callback)：讀取文件
  • fs.unlink(path, callback)：刪除文件
  • fs.mkdir(path[, options], callback)：創(chuàng)建文件夾

使用示例：

// 導(dǎo)入fs模塊
const fs = require('fs');
fs.writeFile('./test01.txt', '學(xué)而時(shí)習(xí)之，不亦說(shuō)乎', err => {
//如果寫入失敗，則回調(diào)函數(shù)調(diào)用時(shí)，會(huì)傳入錯(cuò)誤對(duì)象，如寫入成功，會(huì)傳入 null
    if (err) {
        console.log(err);
        return;
    }
    console.log('寫入成功');
});

1.5.1 fs模塊

fs模塊是nodejs中關(guān)于文件操作的模塊。

語(yǔ)法：

• fs.writeFile(file, data[, options], callback)：文件寫入
  • file 文件名
  • data 待寫入的數(shù)據(jù)
  • options 選項(xiàng)設(shè)置 （可選）
  • callback 寫入回調(diào)

使用示例：

// 導(dǎo)入fs模塊
const fs = require('fs');
var str = "北冥有魚(yú)，其名為鯤。鯤之大，不知其幾千里也。"
fs.writeFile('./test01.txt', str, err => {
//如果寫入失敗，則回調(diào)函數(shù)調(diào)用時(shí)，會(huì)傳入錯(cuò)誤對(duì)象，如寫入成功，會(huì)傳入 null
    if (err) {
        console.log(err);
        return;
    }
    console.log('寫入成功');
});

• fs.readFile(path[, options], callback)：讀取文件
  • path 文件路徑
  • options 選項(xiàng)配置
  • callback 回調(diào)函數(shù)

使用示例：

//導(dǎo)入 fs 模塊
const fs = require('fs');
// 讀取的是字節(jié)
fs.readFile('./test01.txt', (err, data) => {
    if(err) throw err;
    console.log(data);
});
// 安裝編碼來(lái)讀取
fs.readFile('./test02.txt', 'utf-8',(err, data) => {
    if(err) throw err;
    console.log(data);
});

• fs.unlink(path, callback)：刪除文件
  • path 文件路徑
  • callback 操作后的回調(diào)

const fs = require('fs');
fs.unlink('./test01.txt', err => {
    if(err) throw err;
    console.log('刪除成功');
});

• fs.mkdir(path[, options], callback)：創(chuàng)建文件夾
  • path 文件夾路徑
  • options 選項(xiàng)配置（ 可選 ）
  • callback 操作后的回調(diào)

使用示例：

const fs = require('fs');
// 創(chuàng)建文件夾
fs.mkdir('./a1', err => {
    if(err) throw err;
    console.log('創(chuàng)建成功');
});
//遞歸創(chuàng)建
fs.mkdir('./aa/b1/c1', {recursive: true}, err => {
    if(err) throw err;
    console.log('遞歸創(chuàng)建成功');
});

• fs.rmdir(path[, options], callback)：刪除文件夾
  • path：文件夾路徑
  • options：選項(xiàng)配置（ 可選 ）
  • callback：操作后的回調(diào)

使用示例：

const fs = require('fs');
//刪除文件夾
fs.rmdir('./a1', err => {
    if(err) throw err;
    console.log('刪除成功');
});
//遞歸刪除文件夾
fs.rmdir('./aa', {recursive: true}, err => {
    if(err) {
        console.log(err);
    }
    console.log('遞歸刪除')
});

1.5.2 http模塊

http模塊是nodejs中有關(guān)于http協(xié)議的模塊。

（1）創(chuàng)建HTTP服務(wù)：

// 1. 導(dǎo)入http模塊
const http = require('http');
/**
 * 2. 創(chuàng)建http服務(wù)
 *      request:請(qǐng)求對(duì)象
 *      response:響應(yīng)對(duì)象
 */
const server = http.createServer((request, response) => {
    response.end('Hello HTTP server');
});
// 3. 監(jiān)聽(tīng)端口, 啟動(dòng)服務(wù)
server.listen(8000, () => {
    console.log('服務(wù)已經(jīng)啟動(dòng), 端口 9000 監(jiān)聽(tīng)中...');
});

打開(kāi)瀏覽器，訪問(wèn)：http://localhost:8000

（2）request對(duì)象

常用方法及屬性：

使用示例：

// 1、引入http模塊
const http = require("http");
const url = require('url')
// 2、建立服務(wù)
const server = http.createServer((request, response) => {
    // 設(shè)置響應(yīng)類型
    response.setHeader("Content-Type", "text/html;charset=utf-8")
    // 獲取完整的請(qǐng)求路徑(帶請(qǐng)求參數(shù))
    var requestUrl =url.parse(request.url).pathname;
    // 獲取查詢字符串
    var params = url.parse(request.url).query;
    response.write(`<hr> 請(qǐng)求方式: ${request.method}`);
    response.write(`<hr> 協(xié)議和版本: ${request.httpVersion}`);
    response.write(`<hr> 請(qǐng)求路徑: ${request.url}`);
    response.write(`<hr> URL 路徑: ${requestUrl}`);
    response.write(`<hr> URL 查詢字符串: ${params}`);
    response.write(`<hr> 請(qǐng)求頭: ${JSON.stringify(request.headers)}`);
    response.write("name:" + params.name);
    if (request.url == "/register" && request.method == "GET") {
        response.end("<hr> welcome to register...");
    } else if (request.url == "/login" && request.method == "GET") {
        response.end("<hr> welcome to login...");
    } else {
        response.end("<h1>404 Not Found</h1>")
    }
})
// 3、監(jiān)聽(tīng)端口
server.listen(8000, () => {
    console.log('服務(wù)啟動(dòng)中....');
})

打開(kāi)瀏覽器，訪問(wèn)：http://localhost:8000/register?username=xiaohui

（3）response對(duì)象

常用方法及屬性：

使用示例：

require('http').createServer((request, response) => {
    //獲取請(qǐng)求的方法已經(jīng)路徑
    let {url, method} = request;
    // 設(shè)置響應(yīng)類型
    response.setHeader("content-Type", "text/html")
    if (method == "GET" && url == "/index.html") {
        // 通過(guò)fs模塊讀取文件(同步讀取)
        let data = require('fs').readFileSync('./index.html');
        response.statusCode = 200;
        response.end(data);
    } else {
        let data = require('fs').readFileSync('./404.html');
        response.statusCode = 404;
        response.end(data);
    }
}).listen(8000, () => {
    console.log('8000端口正在啟動(dòng)中....');
})

訪問(wèn)：http://localhost:8000/index.html

1.6 NPM包管理工具

npm全稱Node Package Manager，他是node包管理和分發(fā)工具。我們可以把NPM理解為java中的Maven。我們通過(guò)npm可以很方便地下載js庫(kù)，管理前端工程。最近版本的node.js已經(jīng)集成了npm工具，在命令提示符輸npm -v 可查看當(dāng)前npm版本。

NPM官網(wǎng)：https://www.npmjs.com/

1.6.1 修改npm鏡像

NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個(gè)網(wǎng)站在國(guó)內(nèi)速度比較慢。這里推薦使用淘寶 NPM 鏡像 ，淘寶 NPM 鏡像是一個(gè)完整 npmjs.com 鏡像。

設(shè)置鏡像地址：

#經(jīng)過(guò)下面的配置，以后所有的 npm install 都會(huì)經(jīng)過(guò)淘寶的鏡像地址下載
npm config set registry https://registry.npmmirror.com
#查看npm配置信息
npm config list
# 查看鏡像源
npm config get registry

1.6.2 相關(guān)命令

1.6.3 初始化工程

使用npm init命令可以把當(dāng)前文件夾初始化成一個(gè)“包”，即一個(gè)標(biāo)準(zhǔn)的nodejs工程

建立一個(gè)空文件夾，在命令提示符進(jìn)入該文件夾 執(zhí)行命令初始化

npm init
npm init -y		# 全面使用默認(rèn)值來(lái)初始化項(xiàng)目

按照提示輸入相關(guān)信息，如果是用默認(rèn)值則直接回車即可。

C:\Users\Admin\Desktop\dfxt\dfxt_day02\web\NodeJSDemo\demo04_npm>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (demo04_npm)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:                                                                                                                                                                           
author:                                                                                                                                                                             
license: (ISC)                                                                                                                                                                      
About to write to C:\Users\Admin\Desktop\dfxt\dfxt_day02\web\NodeJSDemo\demo04_npm\package.json:
{
  "name": "demo04_npm",		# 項(xiàng)目名稱
  "version": "1.0.0",		# 項(xiàng)目版本號(hào)
  "description": "",		# 項(xiàng)目描述
  "main": "index.js",		# 入口文件
  "scripts": {				# 腳本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",				# 作者
  "license": "ISC"			# 認(rèn)證信息
}
Is this OK? (yes) yes

npm init 命令的作用是將文件夾初始化為一個(gè)“包”，創(chuàng)建 package.json 文件，執(zhí)行完npm init后會(huì)生成package.json文件，這個(gè)是包的配置文件，相當(dāng)于maven的pom.xml，我們之后也可以根據(jù)需要進(jìn)行修改。

1）安裝鏡像

install命令用于安裝某個(gè)模塊，如果我們想安裝jquery模塊，輸出命令如下：

# 下載最新版本的jquery
npm install jquery

在該目錄下已經(jīng)出現(xiàn)了一個(gè)node_modules文件夾和package-lock.json文件。

• node_modules文件夾：用于存放下載的js庫(kù)（相當(dāng)于maven的本地倉(cāng)庫(kù)）。
• package-lock.json文件：確定當(dāng)前安裝的包的依賴，以便后續(xù)重新安裝的時(shí)候生成相同的依賴，而忽略項(xiàng)目開(kāi)發(fā)過(guò)程中有些依賴已經(jīng)發(fā)生的更新。

我們?cè)俅蜷_(kāi)package.json文件，發(fā)現(xiàn)剛才下載的jquery已經(jīng)添加到依賴列表中了，依賴包會(huì)被添加到dependencies節(jié)點(diǎn)下，類似maven中的<dependencies>標(biāo)簽。

安裝時(shí)想指定特定的版本：

npm install jquery@3.2.1

查看package.json的依賴：

"dependencies": {
    "jquery": "^3.2.1"
}

2）版本號(hào)說(shuō)明

• 指定版本：比如3.2.1，遵循“大版本.次要版本.小版本”的格式規(guī)定，安裝時(shí)只安裝指定版本。
• 波浪號(hào)指定版本：比如~3.2.1，表示安裝3.2.x的最新版本（不低于3.2.1），但是不安裝3.3.x，也就是說(shuō)安裝時(shí)不改變大版本號(hào)和次要版本號(hào)。
• 插入號(hào)指定版本：比如ˆ3.2.1，表示安裝3.x.x的最新版本（不低于3.2.1），但是不安裝2.x.x，也就是說(shuō)安裝時(shí)不改變大版本號(hào)。需要注意的是，如果大版本號(hào)為0，比如^0.2.1，則插入號(hào)的行為與波浪號(hào)相同，這是因?yàn)榇藭r(shí)處于開(kāi)發(fā)階段，即使是次要版本號(hào)變動(dòng)，也可能帶來(lái)程序的不兼容。
• latest：安裝最新版本。比如：npm install jquery@latest。需要注意，“最新版本”指的是latest標(biāo)簽指向的版本，而latest通常是主版本的最新穩(wěn)定版，但不一定是最高的版本號(hào)，因?yàn)榭赡苡蓄A(yù)發(fā)布版本存在。例如，如果一個(gè)包的版本是1.2.3，然后發(fā)布了2.0.0-beta，這時(shí)候latest可能仍然指向1.2.3，直到2.0.0正式發(fā)布。

npm安裝依賴說(shuō)明：

3）全局安裝

在 npm 中，-g 是 --global 的縮寫，表示全局安裝。它的作用是將一個(gè)包（package）安裝到系統(tǒng)的全局環(huán)境中，而不是當(dāng)前項(xiàng)目的本地目錄。全局安裝后的包可以在系統(tǒng)的任何目錄下通過(guò)命令行直接使用。

全局安裝適用于需要跨項(xiàng)目使用的命令行工具或全局工具。例如：vue-cli（Vue 腳手架）、create-react-app（React 腳手架）、nodemon（自動(dòng)重啟 Node 服務(wù)）等。

全局安裝的路徑：

• Windows：

C:\Users\<用戶名>\AppData\Roaming\npm\node_modules

• macOS/Linux：

/usr/local/lib/node_modules

安裝與卸載全局包：

npm install -g @vue/cli		# 全局安裝 Vue CLI（跨項(xiàng)目使用）
npm uninstall -g @vue/cli  	# 卸載全局的 Vue CLI

4）運(yùn)行依賴和開(kāi)發(fā)依賴

我們使用npm install <packageName>就能在線下載依賴到本地的node_modules目錄，但我們項(xiàng)目打包時(shí)通常不會(huì)打包項(xiàng)目的node_modules以減輕項(xiàng)目大小。當(dāng)項(xiàng)目發(fā)送給了團(tuán)隊(duì)的其他成員時(shí)只有源代碼而沒(méi)有項(xiàng)目所需的依賴，此時(shí)項(xiàng)目是無(wú)法運(yùn)行的。

因此我們安裝某個(gè)依賴時(shí)，除了下載依賴項(xiàng)到本地的node_modules目錄外，還應(yīng)該記錄當(dāng)前項(xiàng)目的依賴項(xiàng)配置，這樣就算其他人獲得到了項(xiàng)目源代碼也可以按照依賴項(xiàng)配置來(lái)下載當(dāng)前項(xiàng)目所需依賴。

在安裝（npm install xxx）某個(gè)依賴項(xiàng)時(shí)，可以通過(guò)配置--save或--save-dev來(lái)將該依賴項(xiàng)記錄下來(lái)：

• –save 等同于 -S （常用，可保存在package.json文件中）：依賴項(xiàng)信息將加入到dependencies中，表示是生產(chǎn)階段的依賴,也就是項(xiàng)目運(yùn)行時(shí)的依賴，就是程序上線后仍然需要依賴。
• –save-dev 等同于 -D：依賴項(xiàng)信息將加入到devDependencies，表示是開(kāi)發(fā)階段的依賴，就是我們?cè)陂_(kāi)發(fā)過(guò)程中需要的依賴，只在開(kāi)發(fā)階段起作用。

Tips：從npm 5.0.0版本開(kāi)始，默認(rèn)行為改變了?，F(xiàn)在當(dāng)運(yùn)行npm install xxx時(shí)，npm會(huì)自動(dòng)將包添加到dependencies中，相當(dāng)于之前需要–save的效果。

如下：

{
    // jquery是開(kāi)發(fā)依賴
  "devDependencies": {
    "jquery": "^3.7.1"
  },
      // bootstrap是生產(chǎn)依賴
  "dependencies": {
    "bootstrap": "^5.3.5"
  }
}

項(xiàng)目運(yùn)行時(shí)必須依賴的包（無(wú)論是本地開(kāi)發(fā)、生產(chǎn)環(huán)境還是其他環(huán)境），例如一些框架或常用庫(kù)，如：JQuery、Bootstrap、Vue、axios等依賴，如果缺少這些依賴，代碼將無(wú)法運(yùn)行，這些依賴就應(yīng)該是dependencies；

一些僅在開(kāi)發(fā)階段需要的依賴，生產(chǎn)環(huán)境不需要。例如一些構(gòu)建、轉(zhuǎn)碼、測(cè)試工具等，如webpack、babel、eslint、jest等，這些依賴投入到生產(chǎn)環(huán)境中就再也不需要了，這些依賴就應(yīng)該是devDependencies；

1.6.5 package和package-lock文件 1）package文件：

package.json定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息，包括名稱、版本、許可證、依賴模塊等元數(shù)據(jù)。

當(dāng)執(zhí)行 npm install 的時(shí)候，node 會(huì)先從 package.json 文件中讀取所有 dependencies 信息，然后根據(jù) dependencies 中的信息與 node_modules 中的模塊進(jìn)行對(duì)比，沒(méi)有的直接下載，已有的檢查更新。另外，package.json 文件只記錄你通過(guò) npm install 方式安裝的模塊信息，而這些模塊所依賴的其他子模塊的信息不會(huì)記錄。

2）package-lock文件：

package.json文件中保存著項(xiàng)目的依賴以及這些依賴的版本信息，但是這些依賴的版本并非是一個(gè)固定的，而是可以隨著時(shí)間的流逝（例如該依賴發(fā)布了新版本）自動(dòng)更新的。因此，同一個(gè)package.json在不同時(shí)間點(diǎn)執(zhí)行npm install可能會(huì)導(dǎo)致項(xiàng)目實(shí)際使用的依賴版本不同。

如項(xiàng)目中JQuery依賴為ˆ3.2.1，當(dāng)前該依賴最新發(fā)布版本為3.5.1，執(zhí)行npm install命令后將3.5.1版本的JQuery下載到了項(xiàng)目中。四個(gè)月后JQuery官方對(duì)其進(jìn)行更新，當(dāng)前最新版本為3.7.1，此時(shí)從新執(zhí)行該項(xiàng)目的``npm install`將會(huì)安裝3.7.1版本的JQuery。

可以看到，同一個(gè)項(xiàng)目，不同時(shí)間點(diǎn)來(lái)執(zhí)行安裝命令會(huì)導(dǎo)致項(xiàng)目的依賴版本不一樣。package-lock.json文件正是來(lái)解決這個(gè)問(wèn)題的。

package-lock.json 文件會(huì)保存 node_modules 中所有包的信息，包括精確版本 version 和下載地址 resolved 以及依賴關(guān)系 dependencies 等，用以記錄當(dāng)前狀態(tài)下實(shí)際安裝的各個(gè)模塊的具體來(lái)源和版本號(hào)。這樣 npm install 時(shí)速度就會(huì)提升。

當(dāng)項(xiàng)目中已有package-lock.json 文件，在安裝項(xiàng)目依賴時(shí)，將以該文件為主進(jìn)行解析安裝指定版本依賴包，而不是使用 package.json 來(lái)解析和安裝模塊。因?yàn)?package.json 指定的版本不夠具體，而package-lock 為每個(gè)模塊及其每個(gè)依賴項(xiàng)指定了版本，位置和完整性哈希，所以它每次的安裝都是相同的。

package-lock.json 文件主要作用有以下兩點(diǎn)：

1）當(dāng)刪除 node_module 目錄時(shí)，想通過(guò) npm install 恢復(fù)所有包時(shí)，提升下載速度。

2）鎖定版本號(hào)，防止自動(dòng)升級(jí)新版本。

項(xiàng)目中存在了package-lock.json當(dāng)下載依賴時(shí)會(huì)以該文件中鎖定的版本來(lái)下載，但有時(shí)我們也希望更新一下項(xiàng)目依賴，此時(shí)可以執(zhí)行npm update來(lái)更新項(xiàng)目的依賴版本，并且更新package-lock.json鎖定的版本。

一般來(lái)說(shuō)前端工程完畢后是不會(huì)將node_modules文件夾打包到項(xiàng)目中的（精簡(jiǎn)項(xiàng)目），當(dāng)項(xiàng)目發(fā)布到互聯(lián)網(wǎng)時(shí)，用戶需要自行執(zhí)行npm install來(lái)根據(jù)package.json或package-lock.json文件來(lái)下載依賴。如果項(xiàng)目中沒(méi)有package-lock.json可以使用如下命令來(lái)構(gòu)建一個(gè)package-lock.json：

npm install --package-lock-only

到此這篇關(guān)于NodeJS的使用與NPM包管理器詳解的文章就介紹到這了,更多相關(guān)nodejs與npm包管理器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！