Node開發學習筆記

1.Node開發概述

1.1 爲什麼要學習服務器端開發基礎

• 能夠和後端程序員更加緊密的配合
• 網站業務邏輯前置，學習前端技術需要後端技術支撐（Ajax）
• 擴寬知識視野，能夠站在更高的角度審視整個項目

1.2 服務器端開發要做的事情

• 實現網站的業務邏輯
• 數據的增刪改查

1.3 爲什麼選擇Node

• 使用JavaScript語法開發後端應用
• 一些公司要求前端工程師掌握Node開發
• 生態系統活躍，有大量開源庫可以使用
• 前端開發工具大多基於Node開發

1.4 Node是什麼
Node是一個基於Chrome V8引擎的JavaScript代碼運行環境。

運行環境
瀏覽器（軟件）能夠運行JavaScript代碼，瀏覽器就是JavaScript代碼的運行環境
Node（軟件）能夠運行JavaScript代碼，Node就是JavaScript代碼的運行環境

2. Node運行環境搭建

2.1 Node.js運行環境安裝

官網地址：https://nodejs.org/en/

LTS = Long Term Support 長期支持版 穩定版
Current 擁有最新特性 實驗版

2.2 Node環境安裝失敗解決辦法

失敗原因：系統帳戶權限不足。
解決辦法：

1. 以管理員身份運行powershell命令行工具
2. 輸入運行安裝包命令 msiexec /package node安裝包位置

執行命令報錯

• 失敗原因：Node安裝目錄寫入環境變量失敗
• 解決辦法：將Node安裝目錄添加到環境變量中

2.3 PATH環境變量
存儲系統中的目錄，在命令行中執行命令的時候系統會自動去這些目錄中查找命令的位置。

添加環境變量的方法跟添加JDK環境變量一樣

3. Node.js快速入門

3.1 Node.js 的組成
JavaScript 由三部分組成，ECMAScript，DOM，BOM。
Node.js是由ECMAScript及Node 環境提供的一些附加API組成的，包括文件、網絡、路徑等等一些更加強大的 API。

3.2 Node.js基礎語法
所有ECMAScript語法在Node環境中都可以使用。
在Node環境下執行代碼，使用Node命令執行後綴爲.js的文件即可

3.3 Node.js全局對象global
在瀏覽器中全局對象是window，在Node中全局對象是global。
Node中全局對象下有以下方法，可以在任何地方使用，global可以省略。

• console.log() 在控制檯中輸出
• setTimeout() 設置超時定時器
• clearTimeout() 清除超時時定時器
• setInterval() 設置間歇定時器
• clearInterval() 清除間歇定時器

4. Node.js模塊化開發

4.1 JavaScript開發弊端
JavaScript在使用時存在兩大問題，文件依賴和命名衝突。

4.2Node.js中模塊化開發規範

• Node.js規定一個JavaScript文件就是一個模塊，模塊內部定義的變量和函數默認情況下在外部無法得到
• 模塊內部可以使用exports對象進行成員導出， 使用require方法導入其他模塊。

4.3 模塊成員導出

// a.js
// 在模塊內部定義變量
let version = 1.0;
// 在模塊內部定義方法
const sayHi = name => 您好, ${name};
// 向模塊外部導出數據
exports.version = version;
exports.sayHi = sayHi;

4.4 模塊成員的導入

// b.js
// 在b.js模塊中導入模塊a
let a = require(’./b.js’);
// 輸出b模塊中的version變量
console.log(a.version);
// 調用b模塊中的sayHi方法 並輸出其返回值
console.log(a.sayHi(‘黑馬講師’));
// 導入模塊時後綴可以省略

4.5 模塊成員導出的另一種方式
exports是module.exports的別名(地址引用關係)，導出對象最終以module.exports爲準。

module.exports.version = version;
module.exports.sayHi = sayHi;

4.6 模塊導出兩種方式的聯繫與區別

5. 系統模塊

5.1 什麼是系統模塊
Node運行環境提供的API. 因爲這些API都是以模塊化的方式進行開發的, 所以我們又稱Node運行環境提供的API爲系統模塊

5.2 系統模塊fs 文件操作
f：file 文件 ，s：system 系統，文件操作系統。
let fs = require(‘fs’);
讀取文件內容
fs.reaFile(‘文件路徑/文件名稱’[,‘文件編碼’], callback);
寫入文件內容
fs.writeFile(‘文件路徑/文件名稱’, ‘數據’, callback);

實例：

5.3 系統模塊path 路徑操作

• 爲什麼要進行路徑拼接
• 不同操作系統的路徑分隔符不統一
• /public/uploads/avatar
• Windows 上是 \ /
• Linux 上是 /

5.4 路徑拼接語法
path.join(‘路徑’, ‘路徑’, …);

5.5 相對路徑VS絕對路徑

• 大多數情況下使用絕對路徑，因爲相對路徑有時候相對的是命令行工具的當前工作目錄
• 在讀取文件或者設置文件路徑時都會選擇絕對路徑
• 使用__dirname獲取當前文件所在的絕對路徑

讀寫文件與路徑綜合實例：

6. 第三方模塊

6.1 什麼是第三方模塊
別人寫好的、具有特定功能的、我們能直接使用的模塊即第三方模塊，由於第三方模塊通常都是由多個文件組成並且被放置在一個文件夾中，所以又名包。

第三方模塊有兩種存在形式：
以js文件的形式存在，提供實現項目具體功能的API接口。
以命令行工具形式存在，輔助項目開發

6.2 獲取第三方模塊
npmjs.com：第三方模塊的存儲和分發倉庫
npm (node package manager) ： node的第三方模塊管理工具

• 下載：npm install 模塊名稱
• 卸載：npm unintall package 模塊名稱

全局安裝與本地安裝

• 命令行工具：全局安裝
• 庫文件：本地安裝

6.3 第三方模塊 nodemon
nodemon是一個命令行工具，用以輔助項目開發。
在Node.js中，每次修改文件都要在命令行工具中重新執行該文件，非常繁瑣。

使用步驟

• 使用npm install nodemon –g 下載它
• 在命令行工具中用nodemon命令替代node命令執行文件

安裝nodemon錯誤
可參考鏈接：nodemon : 無法加載文件C:\Users\xxx\AppData\Roaming\npm\nodemon.ps1。未對文件…進行數字簽名。無法在當前系統上運行該腳本。

6.4 第三方模塊 nrm
nrm ( npm registry manager )：npm下載地址切換工具
npm默認的下載地址在國外，國內下載速度慢
使用步驟

• 使用npm install nrm –g 下載它
• 查詢可用下載地址列表 nrm ls
• 切換npm下載地址 nrm use 下載地址名稱

6.5 第三方模塊 Gulp

• 基於node平臺開發的前端構建工具
• 將機械化操作編寫成任務, 想要執行機械化操作時執行一個命令行命令任務就能自動執行了
• 用機器代替手工，提高開發效率。

6.6 Gulp能做什麼

• 項目上線，HTML、CSS、JS文件壓縮合並
• 語法轉換（es6、less …）
• 公共文件抽離
• 修改文件瀏覽器自動刷新

6.7 Gulp使用

• 使用npm install gulp下載gulp庫文件
• 在項目根目錄下建立gulpfile.js文件
• 重構項目的文件夾結構
• src目錄放置源代碼文件
• dist目錄放置構建後文件
• 在gulpfile.js文件中編寫任務
• 在命令行工具中執行gulp任務

6.8 Gulp中提供的方法

• gulp.src()：獲取任務要處理的文件
• gulp.dest()：輸出文件
• gulp.task()：建立gulp任務
• gulp.watch()：監控文件的變化
  

6.9gulp插件的使用方法

• gulp-htmlmin ：html文件壓縮
• gulp-csso ：壓縮css
• gulp-babel ：JavaScript語法轉化
• gulp-less: less語法轉化
• gulp-uglify ：壓縮混淆JavaScript gulp-file-include
• 公共文件包含 browsersync 瀏覽器實時同步

分四步曲：安裝插件–>引入–>調用–>執行



編寫好任務後在PowerShell中直接gulp 任務名稱即可
gulp插件使用方法還可以詳見 npm官網

6.10gulp構建全局任務
gulp.task(‘default’,gulp.series([‘任務一’,‘任務二’,‘任務三’,…]));
如下圖：

執行全局任務用 gulp default命令或者gulp命令

6.11gulp執行任務常見的錯誤
可參考鏈接：gulp執行任務報錯The following tasks did not complete: first,Did you …?gulp構建全局任務時報錯AssertionError

7.package.json文件

7.1 node_modules文件夾的問題

• 文件夾以及文件過多過碎，當我們將項目整體拷貝給別人的時候,，傳輸速度會很慢很慢.
• 複雜的模塊依賴關係需要被記錄，確保模塊的版本和當前保持一致，否則會導致當前項目運行報錯

7.2 package.json文件的作用
項目描述文件，記錄了當前項目信息，例如項目名稱、版本、作者、github地址、當前項目依賴了哪些第三方模塊等。

使用npm init -y命令生成。（默認）或者用npm init 回車，一步步按照提示完成生成

生成的package.json文件內容如下圖所示

這時候去PowerShell命令窗口輸入npm install xxx(包名) ,下載好後可以在package.json文件中看到相關的信息，如下圖所示：

如果這時候把當前目錄下的node_modules目錄刪除，然後再去PowerShell命令窗口執行npm install回車，又可以重新生成node_modules目錄。

7.3文件中scripts的作用
用來存儲命令的別名，當我們頻繁需要執行過長的命令時，我們可以把該條命令寫進scripts對象裏，如下圖建立的命令別名bulid

到PowerShell命令窗口執行命令，可以看到這兩種命令執行的結果是一樣的，如下圖所示：

7.4 項目依賴和開發依賴
項目依賴

• 在項目的開發階段和線上運營階段，都需要依賴的第三方包，稱爲項目依賴
• 使用npm install 包名命令下載的文件會默認被添加到package.json 文件的 dependencies 字段中

開發依賴

• 在項目的開發階段需要依賴，線上運營階段不需要依賴的第三方包，稱爲開發依賴
• 使用npm install 包名–save-dev命令將包添加到package.json文件的devDependencies字段中

用npm install xxx(包名)下載的爲項目依賴，npm install xxx(包名) –save-dev爲開發依賴

執行命令後，到package.json文件如下圖所示：

如果這時候把當前目錄下的node_modules目錄刪除，然後再去PowerShell命令窗口執行npm install回車，又可以重新生成node_modules目錄。

注意：npm install 命令重新生成全部的依賴文件（項目依賴+開發依賴）
npm install –production 命令重新生成的只有項目依賴文件（僅項目依賴）

7.5 package-lock.json文件的作用

• 鎖定包的版本，確保再次下載時不會因爲包版本不同而產生問題
• 加快下載速度，因爲該文件中已經記錄了項目所依賴第三方包的樹狀結構和包的下載地址，重新安裝時只需下載即可，不需要做額外的工作

8.Node.js中模塊加載機制

8.1 模塊查找規則-當模塊擁有路徑但沒有後綴時
require(’./find.js’);
require(’./find’);

• require方法根據模塊路徑查找模塊，如果是完整路徑，直接引入模塊。
• 如果模塊後綴省略，先找同名JS文件再找同名JS文件夾
• 如果找到了同名文件夾，找文件夾中的index.js
• 如果文件夾中沒有index.js就會去當前文件夾中的package.json文件中查找main選項中的入口文件
• 如果找指定的入口文件不存在或者沒有指定入口文件就會報錯，模塊沒有被找到

8.2 模塊查找規則-當模塊沒有路徑且沒有後綴時
require(‘find’);

• Node.js會假設它是系統模塊
• Node.js會去node_modules文件夾中
• 首先看是否有該名字的JS文件
• 再看是否有該名字的文件夾
• 如果是文件夾看裏面是否有index.js
• 如果沒有index.js查看該文件夾中的package.json中的main選項確定模塊入口文件
• 否則找不到報錯