Node學習筆記(2)——node的模塊化開發以及基本的項目配置

1.Node.js模塊化開發

1.1JavaScript開發弊端

JavaScript在使用時存在兩大問題,文件依賴和命名衝突

1.2軟件中的模塊化開發

一個功能就是一個模塊,多個模塊可以組成完整應用,抽離一個模塊不會影響其他功能的運行。

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

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

1.4模塊成員導出
在這裏插入圖片描述
1.5模塊成員的導入
在這裏插入圖片描述
導入模塊時,後綴可以省略

1.6模塊成員導出的另一種方式
在這裏插入圖片描述
exports是module.exports的別名(地址引用關係),導出對象最終以module.exports

1.7模塊導出兩種方式的聯繫與區別
在這裏插入圖片描述

2.系統模塊

2.1什麼是系統模塊

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

2.2系統模塊fs文件操作

f:file文件, s:system系統, 文件操作系統

const fs = require('fs');

(1)讀取文件內容:

fs.reaFile('文件路徑/文件名稱'[, '文件編碼'], callback);

讀取文件語法示例:
在這裏插入圖片描述
(2)寫入文件內容:

fs.writeFile('文件路徑/文件名稱', '數據',callback);

寫入文件語法示例:
在這裏插入圖片描述
2.3系統模塊path路徑操作

爲什麼要進行路徑拼接

  • 不同操作系統的路徑分隔符不統一
  • /public/uploads/awatar
  • windows上是\ /
  • Linux上是/

2.4路徑拼接語法

path.join('路徑', '路徑', ...);

在這裏插入圖片描述
2.5相對路徑VS絕對路徑

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

3.第三方模塊

3.1什麼是第三方模塊

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

第三方模塊的兩種存在形式:

  • 以js文件的形式存在,提供實現項目具體功能的API接口
  • 以命令行工具形式存在,輔助項目開發

3.2獲取第三方模塊

npmjs.com:第三方模塊的存儲和分發倉庫

npm(node package manager):node的第三方模塊管理工具

  • 下載:npm install 模塊名稱
  • 卸載:npm uninstall package 模塊名稱

全局安裝與本地安裝

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

3.3第三方模塊nodemon

nodemon是一個命令行工具,用以輔助項目開發;
在Node.js中,每次修改文件都要在命令行工具中重新執行該文件,非常繁瑣

使用步驟

1.使用npm install nodemon -g 下載它
2.在命令行工具中用nodemon命令代替node命令執行文件

3.4第三方模塊nrm

nrm(npm registry manager):npm 下載地址切換工具

npm默認的下載地址在國外,國內下載速度慢
在這裏插入圖片描述
使用步驟:
1.使用npm install nrm -g下載它

2.查詢可用下載地址列表nrmls

3.切換npm下載地址 nrm use 下載地址名稱

這裏我下載出現了一個問題,拋個截圖:

在這裏插入圖片描述

原因是資源的問題,要配置淘寶鏡像
npm config set registry https://registry.npm.taobao.org
 
配置完成後檢驗是否成功
npm config get registry
 
重新安裝
npm install nrm -g

成功的截圖:
在這裏插入圖片描述
拋個完整截圖:
在這裏插入圖片描述
3.5第三方模塊 Gulp

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

3.6Gulp能做什麼

  • 項目上線,HTML、CSS、JS文件壓縮
  • 語法轉換(es6轉es5, less轉css)
  • 公共文件抽離
  • 修改文件瀏覽器自動刷新

3.7Gulp使用

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

3.8Gulp中提供的方法

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

在這裏插入圖片描述
3.9Gulp插件

在這裏插入圖片描述

4.package.json文件

4.1node_modules文件夾的問題

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

4.2package.json文件的作用(在項目開始時生成此文件)

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

npm  init  -y   //此命令是生成默認內容
npm  init  //此命令一步一步生成內容,可以填寫或者修改

命令生成。當項目傳遞給別人時,我們不需要傳遞node_modules文件夾,別人拿到項目時,只要有package.json文件,可以通過命令

npm install

即可自動下載項目依賴的第三方模塊,執行此命令,會自動來到項目根目錄下的packahe.json文件裏面,下載

"dependencies"

裏面的第三方模塊,從而解決node_modules傳輸慢的問題。

4.3項目依賴

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

4.5開發依賴

  • 在項目開發階段需要的依賴,線上運營階段不需要依賴的第三方包,稱爲開發依賴
  • 使用npm install包名 --save-dev命令將包添加到package.json文件的devDependencies字段中(以此來區分項目依賴和開發依賴)
    使用命令
npm install --production

下載開發依賴的第三方包

4.6package-lock.json文件的作用

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

4.7package.json文件中scripts作用

scripts中存儲的是命令的別名;

在script命令新建build,如下圖:
在這裏插入圖片描述
在項目中新建app.js文件
然後在命令行中用普通命令執行app.js文件
在這裏插入圖片描述
用bulid命令執行:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章