柚子快報邀請碼778899分享：Node.js詳解

http://yzkb.51969.com/

目錄

Node.js - 初體驗

Node.js - 為何能執(zhí)行JS？

Node.js - 安裝

Node.js - 使用

Node.js - 模塊

fs模塊 - 讀寫文件

path模塊 - 路徑處理

案例 - 壓縮前端html

http模塊 - 創(chuàng)建Web服務

Node.js - 模塊化

CommonJS標準

ECMAScript標準

ECMAScript標準 - 默認導出和導入

ECMAScript標準 - 命名導出和導入

包

npm - 軟件包管理器

npm - 安裝所有依賴

npm - 全局軟件包 nodemon

npm - 刪除軟件包

Node.js - 初體驗

定義：Node.js是一個跨平臺JavaScript運行環(huán)境，使開發(fā)者可以搭建服務器端的JavaScript應用程序。

作用：使用Node.js編寫服務器端程序

編寫數(shù)據(jù)接口，提供網(wǎng)頁資源瀏覽功能等等前端工程化：為后續(xù)學習Vue和React等框架做鋪墊，Node.js是前端工程化的基礎(因為Node.js可以主動讀取前端代碼內(nèi)容)

Node.js - 為何能執(zhí)行JS？

首先：瀏覽器能執(zhí)行JS代碼，依靠的是內(nèi)核中的V8引擎(C++程序)

其次：Node.js是基于Chrome V8引擎進行封裝(運行環(huán)境)

區(qū)別：都支持ECMAScript標準語法，Node.js有獨立的API

注意：Node.js環(huán)境沒有DOM和BOM等

Node.js - 安裝

推薦下載：node-v16.19.0.msi安裝程序(指定版本：兼容vue-admin-template模板)

安裝過程：默認下一步即可

注意：

安裝在非中文路徑下無需勾選自動安裝其他配套軟件

成功驗證：打開cmd終端，輸入?node -v?命令查看版本號，成功則會輸出版本號，如下圖：

Node.js - 使用

接下來我們通過下書需求初步完成Node.js的使用

需求：新建JS文件，并編寫代碼后，在node環(huán)境下執(zhí)行

命令：在VSCode集成終端中，輸入node xxx.js，回車即可執(zhí)行

接下來使用VSCode進行代碼操作：

// 目標：編寫 js 代碼，在 Node 環(huán)境下使用 node 命令來獨立執(zhí)行

console.log('Hello, Node.js')

for (let i = 0; i < 3; i++) {

console.log(6)

}

終端輸入：node 文件名.js->

Node.js - 模塊

fs模塊 - 讀寫文件

模塊：類似拆按，封裝了方法/屬性

fs模塊：封裝了與本機文件系統(tǒng)進行交互的方法/屬性

語法：

加載fs模塊文件寫入文件內(nèi)容讀取文件內(nèi)容

接下來我們使用fs模塊實現(xiàn)寫入/讀取文件內(nèi)容：

寫入代碼如下：

/**

* 目標：基于 fs 模塊讀寫文件內(nèi)容

* 1. 加載 fs 模塊對象

* 2. 寫入文件內(nèi)容

* 3. 讀取文件內(nèi)容

*/

// 1. 加載 fs 模塊對象

const fs = require('fs')

// 2. 寫入文件內(nèi)容

fs.writeFile('./test.txt', 'hello, Node.js', (err) => {

if (err) console.log(err)

else console.log('寫入成功')

})

// 3. 讀取文件內(nèi)容

fs.readFile('./test.txt', (err, data) => {

if (err) console.log(err)

// data 是 buffer 16 進制數(shù)據(jù)流對象

// .toString() 轉(zhuǎn)換成字符串

else console.log(data.toString())

})

結(jié)果->

path模塊 - 路徑處理

問題：Node.js代碼中，相對路徑是根據(jù)終端所在路徑來查找的，可能無法找到你想要的文件

例如如下代碼，我們輸入的路徑是../text.txt，但是在終端中輸入node命令會找不到文件，這是因為node命令的相對路徑是基于終端路徑的

/**

* 目標：在 Node.js 環(huán)境的代碼中，應使用絕對路徑

* 原因：代碼的相對路徑是以終端所在文件夾為起點，而不是 Vscode 資源管理器

* 容易造成目標文件找不到的錯誤

*/

const fs = require('fs')

fs.readFile(path.join(__dirname, '../text.txt'), (err, data) => {

if (err) console.log(err)

else console.log(data.toString())

})

建議：在Node.js代碼中，使用絕對路徑

補充：__dirname內(nèi)置變量(獲取當前模塊目錄-絕對路徑)

注意：path.join()會使用特定于平臺的分隔符，作為界定符，將所有給定的路徑片段在一起

語法：

加載path模塊使用path.join方法，拼接路徑

接下來我們就用path模塊解決上述的問題：

/**

* 目標：在 Node.js 環(huán)境的代碼中，應使用絕對路徑

* 原因：代碼的相對路徑是以終端所在文件夾為起點，而不是 Vscode 資源管理器

* 容易造成目標文件找不到的錯誤

*/

const fs = require('fs')

// 1. 引入 path 模塊對象

const path = require('path')

// 2. 調(diào)用 path.join() 配合 __dirname 組成目標文件的絕對路徑

console.log(__dirname)

fs.readFile(path.join(__dirname, '../text.txt'), (err, data) => {

if (err) console.log(err)

else console.log(data.toString())

})

案例 - 壓縮前端html

為了提高我們的網(wǎng)頁在瀏覽器中的加載效率，我們通常會通過壓縮html的方式提高效率

需求：把回車符\r和換行符\n去掉后，寫入到新html文件中

步驟：

讀取源html文件內(nèi)容正則替換字符串寫入到新的html文件中

源html文件內(nèi)容如下：

壓縮js代碼如下：

/**

* 目標1：壓縮 html 代碼

* 需求：把回車符 \r，換行符 \n 去掉，寫入到新 html 文件中

* 1.1 讀取源 html 文件內(nèi)容

* 1.2 正則替換字符串

* 1.3 寫入到新的 html 文件中

*/

// 1.1 讀取源 html 文件內(nèi)容

const fs = require('fs')

const path = require('path')

fs.readFile(path.join(__dirname, 'public/index.html'), (err, data) => {

if (err) console.log(err)

else {

const htmlStr = data.toString()

// 1.2 正則替換字符串

const resultStr = htmlStr.replace(/[\r\n]/g, '')

console.log(resultStr)

// 1.3 寫入到新的 html 文件中

fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {

if (err) console.log(err)

else console.log('寫入成功')

})

}

})

壓縮后的html代碼如下：

http模塊 - 創(chuàng)建Web服務

需求：創(chuàng)建Web服務并響應內(nèi)容給瀏覽器

步驟：

加載http模塊，創(chuàng)建Web服務對象監(jiān)聽request請求事件，設置響應頭和響應體配置端口號并啟動Web服務瀏覽器請求：//localhost:3000測試(localhost：固定代表本機的域名)

代碼如下：

/**

* 目標：基于 http 模塊創(chuàng)建 Web 服務程序

* 1.1 加載 http 模塊，創(chuàng)建 Web 服務對象

* 1.2 監(jiān)聽 request 請求事件，設置響應頭和響應體

* 1.3 配置端口號并啟動 Web 服務

* 1.4 瀏覽器請求（http://localhost:3000）測試

*/

// 1.1 加載 http 模塊，創(chuàng)建 Web 服務對象

const http = require('http')

const server = http.createServer()

// 1.2 監(jiān)聽 request 請求事件，設置響應頭和響應體

server.on('request', (req, res) => {

// 設置響應頭-內(nèi)容類型-普通文本以及中文編碼格式

res.setHeader('Content-Type', 'text/plain;charset=utf-8')

// 設置響應體內(nèi)容，結(jié)束本次請求與響應

res.end('歡迎使用 Node.js 和 http 模塊創(chuàng)建的 Web 服務')

})

// 1.3 配置端口號并啟動 Web 服務

server.listen(3000, () => {

console.log('Web 服務啟動成功了')

})

瀏覽器訪問->

Node.js - 模塊化

在Node.js中，每個文件都被視為一個單獨的模塊

概念：項目是由很多個模塊文件組成的

好處：提高代碼復用性，按需加載，獨立作用域

使用：需要標準語法導出和導入進行使用

Node.js支持的2種模塊化標準：

CommonJS標準語法（默認）：一般應用在Node.js項目環(huán)境中

ECMAScript標準語法：一般應用在前端工程化項目中

CommonJS標準

需求：定義utils.js模塊，封裝基地址和求數(shù)組總和的函數(shù)

使用：

導出：module.exports = {} const baseURL = 'http://hmajax.net'

const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)

module.exports = {

對外屬性名1: baseURL.

對外屬性名2： getArraySum

} 導入：require('模塊名或路徑') const obj = require('模塊名或路徑')

//obj就等于module.exports導出的對象

模塊名或路徑：

內(nèi)置模塊：直接寫名字（例如：fs，path，http）自定義模塊：寫模塊文件路徑（例如：./utils.js）

代碼實現(xiàn)：

utils.js文件：

/**

* 目標：基于 CommonJS 標準語法，封裝屬性和方法并導出

*/

const baseURL = 'http://hmajax.itheima.net'

const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 導出

module.exports = {

url: baseURL,

arraySum: getArraySum

}

index.js文件：

/**

* 目標：基于 CommonJS 標準語法，導入工具屬性和方法使用

*/

// 導入

const obj = require('./utils.js')

console.log(obj)

const result = obj.arraySum([5, 1, 2, 3])

console.log(result)

ECMAScript標準

ECMAScript標準 - 默認導出和導入

需求：定義utils.js模塊，封裝基地址和求數(shù)組總和的函數(shù)

使用：

導出：export default = {} const baseURL = 'http://hmajax.net'

const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)

export default = {

對外屬性名1: baseURL.

對外屬性名2： getArraySum

} 導入：import 變量名 from '模塊名或路徑' import obj from '模塊名或路徑'

//obj就等于module.exports導出的對象

模塊名或路徑：

內(nèi)置模塊：直接寫名字（例如：fs，path，http）自定義模塊：寫模塊文件路徑（例如：./utils.js）

注意：Node.js默認支持CommonJS標準語法

如需使用ECMAScript標準語法，在運行模塊所在的文件夾新建package.json文件，并設置{"type":"module"}

?代碼實現(xiàn)：

package.json文件：

{

"type": "module"

}

utils.js文件：

/**

* 目標：基于 ECMAScript 標準語法，封裝屬性和方法并"默認"導出

*/

const baseURL = 'http://hmajax.itheima.net'

const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 默認導出

export default {

url: baseURL,

arraySum: getArraySum

}

index.js文件：

/**

* 目標：基于 ECMAScript 標準語法，"默認"導入，工具屬性和方法使用

*/

// 默認導入

import obj from './utils.js'

console.log(obj)

const result = obj.arraySum([10, 20, 30])

console.log(result)

ECMAScript標準 - 命名導出和導入

命名標準使用：

導出：export 修飾定義語句

export const baseURL = 'http://hmajax.net'

export const getArraySum = arr => arr.reduce((sum, val) => sum += val. 0)

導入：import {同名變量} from '模塊名或路徑'

import { baseURL, getArraySum } from '模塊名或路徑'

// baseURL 和 getArraySum 是變量，值為模塊內(nèi)命名導出的同名變量的值

如何選擇：

按需加載，使用命名導出和導入

全部加載，使用默認導出和導入

包

包的概念：將模塊，代碼，其他資料聚合成一個文件夾

分類：

項目包：主要用于編寫項目和業(yè)務邏輯

軟件包：封裝工具和方法進行使用

要求：根目錄中，必須有package.json文件（記錄包的清單信息）

注意：導入軟件包時，引入的默認是index.js的模塊文件/main屬性指定的模塊文件

package.json格式：

{

"name": "cz_utils", 軟件包名稱

"version": "1.0.0", 軟件包當前版本

"description": "一個數(shù)組和字符串常用工具方法的包", 軟件包簡短描述

"main": "index.js", 軟件包入口點

"author": "itheima", 軟件包作者

"license": "MIT" 軟件包許可證(商用后可以用作者名字宣傳)

}

npm - 軟件包管理器

npm是Node.js標準的軟件包管理器，在2017年1月時，npm倉庫中就已有超過350000個軟件包

使用：

初始化清單文件：npm init -y（得到package.json文件，有則略過此命令）下載軟件包：npm i 軟件包名稱使用軟件包

接下來通過實操體驗一下

需求：使用dayjs軟件包，來格式化日期時間

終端輸入命令：

1、npm init -y

2、npm i dayjs

代碼如下：

/**

* 目標：使用 npm 下載 dayjs 軟件包來格式化日期時間

* 1. （可選）初始化項目清單文件，命令：npm init -y

* 2. 下載軟件包到當前項目，命令：npm i 軟件包名稱

* 3. 使用軟件包

*/

// 3. 使用軟件包

const dayjs = require('dayjs')

const nowDateStr = dayjs().format('YYYY-MM-DD')

console.log(nowDateStr)

npm - 安裝所有依賴

由于自己用npm下載依賴比磁盤傳遞拷貝要快得多，所以在安裝依賴時通常由我們自己解決（即node_modules）

命令： npm i

npm - 全局軟件包 nodemon

軟件包區(qū)別：

本地軟件包：當前項目內(nèi)使用，封裝屬性和方法，存在于node_modules

全局軟件包：本機所有項目使用，封裝命令和工具，存在于系統(tǒng)設置的位置

nodemon作用：替代node命令，檢測代碼更改，自動重啟程序

使用：

1.安裝：npm i nodemon -g（-g代表安裝到全局環(huán)境中）

2.運行：nodemon待執(zhí)行的目標js文件

npm - 刪除軟件包

命令：npm uni 軟件包名

柚子快報邀請碼778899分享：Node.js詳解

http://yzkb.51969.com/

參考閱讀