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命令執行: