柚子快報(bào)邀請(qǐng)碼778899分享：Node.js詳解
柚子快報(bào)邀請(qǐng)碼778899分享：Node.js詳解
目錄
Node.js - 初體驗(yàn)
Node.js - 為何能執(zhí)行JS？
Node.js - 安裝
Node.js - 使用
Node.js - 模塊
fs模塊 - 讀寫(xiě)文件
path模塊 - 路徑處理
案例 - 壓縮前端html
http模塊 - 創(chuàng)建Web服務(wù)
Node.js - 模塊化
CommonJS標(biāo)準(zhǔn)
ECMAScript標(biāo)準(zhǔn)
ECMAScript標(biāo)準(zhǔn) - 默認(rèn)導(dǎo)出和導(dǎo)入
ECMAScript標(biāo)準(zhǔn) - 命名導(dǎo)出和導(dǎo)入
包
npm - 軟件包管理器
npm - 安裝所有依賴(lài)
npm - 全局軟件包 nodemon
npm - 刪除軟件包
Node.js - 初體驗(yàn)
定義：Node.js是一個(gè)跨平臺(tái)JavaScript運(yùn)行環(huán)境，使開(kāi)發(fā)者可以搭建服務(wù)器端的JavaScript應(yīng)用程序。
作用：使用Node.js編寫(xiě)服務(wù)器端程序
編寫(xiě)數(shù)據(jù)接口，提供網(wǎng)頁(yè)資源瀏覽功能等等前端工程化：為后續(xù)學(xué)習(xí)Vue和React等框架做鋪墊，Node.js是前端工程化的基礎(chǔ)(因?yàn)镹ode.js可以主動(dòng)讀取前端代碼內(nèi)容)
Node.js - 為何能執(zhí)行JS？
首先：瀏覽器能執(zhí)行JS代碼，依靠的是內(nèi)核中的V8引擎(C++程序)
其次：Node.js是基于Chrome V8引擎進(jìn)行封裝(運(yùn)行環(huán)境)
區(qū)別：都支持ECMAScript標(biāo)準(zhǔn)語(yǔ)法，Node.js有獨(dú)立的API
注意：Node.js環(huán)境沒(méi)有DOM和BOM等
Node.js - 安裝
推薦下載：node-v16.19.0.msi安裝程序(指定版本：兼容vue-admin-template模板)
安裝過(guò)程：默認(rèn)下一步即可
注意：
安裝在非中文路徑下無(wú)需勾選自動(dòng)安裝其他配套軟件
成功驗(yàn)證：打開(kāi)cmd終端，輸入?node -v?命令查看版本號(hào)，成功則會(huì)輸出版本號(hào)，如下圖：
Node.js - 使用
接下來(lái)我們通過(guò)下書(shū)需求初步完成Node.js的使用
需求：新建JS文件，并編寫(xiě)代碼后，在node環(huán)境下執(zhí)行
命令：在VSCode集成終端中，輸入node xxx.js，回車(chē)即可執(zhí)行
接下來(lái)使用VSCode進(jìn)行代碼操作：
// 目標(biāo)：編寫(xiě) js 代碼，在 Node 環(huán)境下使用 node 命令來(lái)獨(dú)立執(zhí)行
console.log('Hello, Node.js')
for (let i = 0; i < 3; i++) {
console.log(6)
}
終端輸入：node 文件名.js->
Node.js - 模塊
fs模塊 - 讀寫(xiě)文件
模塊：類(lèi)似拆按，封裝了方法/屬性
fs模塊：封裝了與本機(jī)文件系統(tǒng)進(jìn)行交互的方法/屬性
語(yǔ)法：
加載fs模塊文件寫(xiě)入文件內(nèi)容讀取文件內(nèi)容
接下來(lái)我們使用fs模塊實(shí)現(xiàn)寫(xiě)入/讀取文件內(nèi)容：
寫(xiě)入代碼如下：
/**
* 目標(biāo)：基于 fs 模塊讀寫(xiě)文件內(nèi)容
* 1. 加載 fs 模塊對(duì)象
* 2. 寫(xiě)入文件內(nèi)容
* 3. 讀取文件內(nèi)容
*/
// 1. 加載 fs 模塊對(duì)象
const fs = require('fs')
// 2. 寫(xiě)入文件內(nèi)容
fs.writeFile('./test.txt', 'hello, Node.js', (err) => {
if (err) console.log(err)
else console.log('寫(xiě)入成功')
})
// 3. 讀取文件內(nèi)容
fs.readFile('./test.txt', (err, data) => {
if (err) console.log(err)
// data 是 buffer 16 進(jìn)制數(shù)據(jù)流對(duì)象
// .toString() 轉(zhuǎn)換成字符串
else console.log(data.toString())
})
結(jié)果->
path模塊 - 路徑處理
問(wèn)題：Node.js代碼中，相對(duì)路徑是根據(jù)終端所在路徑來(lái)查找的，可能無(wú)法找到你想要的文件
例如如下代碼，我們輸入的路徑是../text.txt，但是在終端中輸入node命令會(huì)找不到文件，這是因?yàn)閚ode命令的相對(duì)路徑是基于終端路徑的
/**
* 目標(biāo)：在 Node.js 環(huán)境的代碼中，應(yīng)使用絕對(duì)路徑
* 原因：代碼的相對(duì)路徑是以終端所在文件夾為起點(diǎn)，而不是 Vscode 資源管理器
* 容易造成目標(biāo)文件找不到的錯(cuò)誤
*/
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代碼中，使用絕對(duì)路徑
補(bǔ)充：__dirname內(nèi)置變量(獲取當(dāng)前模塊目錄-絕對(duì)路徑)
注意：path.join()會(huì)使用特定于平臺(tái)的分隔符，作為界定符，將所有給定的路徑片段在一起
語(yǔ)法：
加載path模塊使用path.join方法，拼接路徑
接下來(lái)我們就用path模塊解決上述的問(wèn)題：
/**
* 目標(biāo)：在 Node.js 環(huán)境的代碼中，應(yīng)使用絕對(duì)路徑
* 原因：代碼的相對(duì)路徑是以終端所在文件夾為起點(diǎn)，而不是 Vscode 資源管理器
* 容易造成目標(biāo)文件找不到的錯(cuò)誤
*/
const fs = require('fs')
// 1. 引入 path 模塊對(duì)象
const path = require('path')
// 2. 調(diào)用 path.join() 配合 __dirname 組成目標(biāo)文件的絕對(duì)路徑
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)頁(yè)在瀏覽器中的加載效率，我們通常會(huì)通過(guò)壓縮html的方式提高效率
需求：把回車(chē)符\r和換行符\n去掉后，寫(xiě)入到新html文件中
步驟：
讀取源html文件內(nèi)容正則替換字符串寫(xiě)入到新的html文件中
源html文件內(nèi)容如下：
壓縮js代碼如下：
/**
* 目標(biāo)1：壓縮 html 代碼
* 需求：把回車(chē)符 \r，換行符 \n 去掉，寫(xiě)入到新 html 文件中
* 1.1 讀取源 html 文件內(nèi)容
* 1.2 正則替換字符串
* 1.3 寫(xiě)入到新的 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 寫(xiě)入到新的 html 文件中
fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {
if (err) console.log(err)
else console.log('寫(xiě)入成功')
})
}
})
壓縮后的html代碼如下：
http模塊 - 創(chuàng)建Web服務(wù)
需求：創(chuàng)建Web服務(wù)并響應(yīng)內(nèi)容給瀏覽器
步驟：
加載http模塊，創(chuàng)建Web服務(wù)對(duì)象監(jiān)聽(tīng)request請(qǐng)求事件，設(shè)置響應(yīng)頭和響應(yīng)體配置端口號(hào)并啟動(dòng)Web服務(wù)瀏覽器請(qǐng)求：//localhost:3000測(cè)試(localhost：固定代表本機(jī)的域名)
代碼如下：
/**
* 目標(biāo)：基于 http 模塊創(chuàng)建 Web 服務(wù)程序
* 1.1 加載 http 模塊，創(chuàng)建 Web 服務(wù)對(duì)象
* 1.2 監(jiān)聽(tīng) request 請(qǐng)求事件，設(shè)置響應(yīng)頭和響應(yīng)體
* 1.3 配置端口號(hào)并啟動(dòng) Web 服務(wù)
* 1.4 瀏覽器請(qǐng)求（http://localhost:3000）測(cè)試
*/
// 1.1 加載 http 模塊，創(chuàng)建 Web 服務(wù)對(duì)象
const http = require('http')
const server = http.createServer()
// 1.2 監(jiān)聽(tīng) request 請(qǐng)求事件，設(shè)置響應(yīng)頭和響應(yīng)體
server.on('request', (req, res) => {
// 設(shè)置響應(yīng)頭-內(nèi)容類(lèi)型-普通文本以及中文編碼格式
res.setHeader('Content-Type', 'text/plain;charset=utf-8')
// 設(shè)置響應(yīng)體內(nèi)容，結(jié)束本次請(qǐng)求與響應(yīng)
res.end('歡迎使用 Node.js 和 http 模塊創(chuàng)建的 Web 服務(wù)')
})
// 1.3 配置端口號(hào)并啟動(dòng) Web 服務(wù)
server.listen(3000, () => {
console.log('Web 服務(wù)啟動(dòng)成功了')
})
瀏覽器訪(fǎng)問(wèn)->
Node.js - 模塊化
在Node.js中，每個(gè)文件都被視為一個(gè)單獨(dú)的模塊
概念：項(xiàng)目是由很多個(gè)模塊文件組成的
好處：提高代碼復(fù)用性，按需加載，獨(dú)立作用域
使用：需要標(biāo)準(zhǔn)語(yǔ)法導(dǎo)出和導(dǎo)入進(jìn)行使用
Node.js支持的2種模塊化標(biāo)準(zhǔn)：
CommonJS標(biāo)準(zhǔn)語(yǔ)法（默認(rèn)）：一般應(yīng)用在Node.js項(xiàng)目環(huán)境中
ECMAScript標(biāo)準(zhǔn)語(yǔ)法：一般應(yīng)用在前端工程化項(xiàng)目中
CommonJS標(biāo)準(zhǔn)
需求：定義utils.js模塊，封裝基地址和求數(shù)組總和的函數(shù)
使用：
導(dǎo)出：module.exports = {} const baseURL = 'http://hmajax.net'
const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)
module.exports = {
對(duì)外屬性名1: baseURL.
對(duì)外屬性名2： getArraySum
} 導(dǎo)入：require('模塊名或路徑') const obj = require('模塊名或路徑')
//obj就等于module.exports導(dǎo)出的對(duì)象
模塊名或路徑：
內(nèi)置模塊：直接寫(xiě)名字（例如：fs，path，http）自定義模塊：寫(xiě)模塊文件路徑（例如：./utils.js）
代碼實(shí)現(xiàn)：
utils.js文件：
/**
* 目標(biāo)：基于 CommonJS 標(biāo)準(zhǔn)語(yǔ)法，封裝屬性和方法并導(dǎo)出
*/
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
// 導(dǎo)出
module.exports = {
url: baseURL,
arraySum: getArraySum
}
index.js文件：
/**
* 目標(biāo)：基于 CommonJS 標(biāo)準(zhǔn)語(yǔ)法，導(dǎo)入工具屬性和方法使用
*/
// 導(dǎo)入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5, 1, 2, 3])
console.log(result)
ECMAScript標(biāo)準(zhǔn)
ECMAScript標(biāo)準(zhǔn) - 默認(rèn)導(dǎo)出和導(dǎo)入
需求：定義utils.js模塊，封裝基地址和求數(shù)組總和的函數(shù)
使用：
導(dǎo)出：export default = {} const baseURL = 'http://hmajax.net'
const getArraySum = arr => arr.reduce((sum, val) => sum += val, 0)
export default = {
對(duì)外屬性名1: baseURL.
對(duì)外屬性名2： getArraySum
} 導(dǎo)入：import 變量名 from '模塊名或路徑' import obj from '模塊名或路徑'
//obj就等于module.exports導(dǎo)出的對(duì)象
模塊名或路徑：
內(nèi)置模塊：直接寫(xiě)名字（例如：fs，path，http）自定義模塊：寫(xiě)模塊文件路徑（例如：./utils.js）
注意：Node.js默認(rèn)支持CommonJS標(biāo)準(zhǔn)語(yǔ)法
如需使用ECMAScript標(biāo)準(zhǔn)語(yǔ)法，在運(yùn)行模塊所在的文件夾新建package.json文件，并設(shè)置{"type":"module"}
?代碼實(shí)現(xiàn)：
package.json文件：
{
"type": "module"
}
utils.js文件：
/**
* 目標(biāo)：基于 ECMAScript 標(biāo)準(zhǔn)語(yǔ)法，封裝屬性和方法并"默認(rèn)"導(dǎo)出
*/
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
// 默認(rèn)導(dǎo)出
export default {
url: baseURL,
arraySum: getArraySum
}
index.js文件：
/**
* 目標(biāo)：基于 ECMAScript 標(biāo)準(zhǔn)語(yǔ)法，"默認(rèn)"導(dǎo)入，工具屬性和方法使用
*/
// 默認(rèn)導(dǎo)入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)
ECMAScript標(biāo)準(zhǔn) - 命名導(dǎo)出和導(dǎo)入
命名標(biāo)準(zhǔn)使用：
導(dǎo)出：export 修飾定義語(yǔ)句
export const baseURL = 'http://hmajax.net'
export const getArraySum = arr => arr.reduce((sum, val) => sum += val. 0)
導(dǎo)入：import {同名變量} from '模塊名或路徑'
import { baseURL, getArraySum } from '模塊名或路徑'
// baseURL 和 getArraySum 是變量，值為模塊內(nèi)命名導(dǎo)出的同名變量的值
如何選擇：
按需加載，使用命名導(dǎo)出和導(dǎo)入
全部加載，使用默認(rèn)導(dǎo)出和導(dǎo)入
包
包的概念：將模塊，代碼，其他資料聚合成一個(gè)文件夾
分類(lèi)：
項(xiàng)目包：主要用于編寫(xiě)項(xiàng)目和業(yè)務(wù)邏輯
軟件包：封裝工具和方法進(jìn)行使用
要求：根目錄中，必須有package.json文件（記錄包的清單信息）
注意：導(dǎo)入軟件包時(shí)，引入的默認(rèn)是index.js的模塊文件/main屬性指定的模塊文件
package.json格式：
{
"name": "cz_utils", 軟件包名稱(chēng)
"version": "1.0.0", 軟件包當(dāng)前版本
"description": "一個(gè)數(shù)組和字符串常用工具方法的包", 軟件包簡(jiǎn)短描述
"main": "index.js", 軟件包入口點(diǎn)
"author": "itheima", 軟件包作者
"license": "MIT" 軟件包許可證(商用后可以用作者名字宣傳)
}
npm - 軟件包管理器
npm是Node.js標(biāo)準(zhǔn)的軟件包管理器，在2017年1月時(shí)，npm倉(cāng)庫(kù)中就已有超過(guò)350000個(gè)軟件包
使用：
初始化清單文件：npm init -y（得到package.json文件，有則略過(guò)此命令）下載軟件包：npm i 軟件包名稱(chēng)使用軟件包
接下來(lái)通過(guò)實(shí)操體驗(yàn)一下
需求：使用dayjs軟件包，來(lái)格式化日期時(shí)間
終端輸入命令：
1、npm init -y
2、npm i dayjs
代碼如下：
/**
* 目標(biāo)：使用 npm 下載 dayjs 軟件包來(lái)格式化日期時(shí)間
* 1. （可選）初始化項(xiàng)目清單文件，命令：npm init -y
* 2. 下載軟件包到當(dāng)前項(xiàng)目，命令：npm i 軟件包名稱(chēng)
* 3. 使用軟件包
*/
// 3. 使用軟件包
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)
npm - 安裝所有依賴(lài)
由于自己用npm下載依賴(lài)比磁盤(pán)傳遞拷貝要快得多，所以在安裝依賴(lài)時(shí)通常由我們自己解決（即node_modules）
命令： npm i
npm - 全局軟件包 nodemon
軟件包區(qū)別：
本地軟件包：當(dāng)前項(xiàng)目?jī)?nèi)使用，封裝屬性和方法，存在于node_modules
全局軟件包：本機(jī)所有項(xiàng)目使用，封裝命令和工具，存在于系統(tǒng)設(shè)置的位置
nodemon作用：替代node命令，檢測(cè)代碼更改，自動(dòng)重啟程序
使用：
1.安裝：npm i nodemon -g（-g代表安裝到全局環(huán)境中）
2.運(yùn)行：nodemon待執(zhí)行的目標(biāo)js文件
npm - 刪除軟件包
命令：npm uni 軟件包名
柚子快報(bào)邀請(qǐng)碼778899分享：Node.js詳解
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Bestone優(yōu)選一站
