02模塊加載及包

1、模塊加載及第三方包,Contents,目,錄,Node.js模塊化開發(fā) 系統(tǒng)模塊 第三方模塊 package.json文件 Node.js中模塊的加載機制,1. Node.js模塊化開發(fā),1.1 JavaScript開發(fā)弊端,JavaScript在使用時存在兩大問題，文件依賴和命名沖突。,1. Node.js模塊化開發(fā),1.2 生活中的模塊化開發(fā),1. Node.js模塊化開發(fā),1.3 軟件中的模塊化開發(fā),一個功能就是一個模塊，多個模塊可以組成完整應(yīng)用，抽離一個模塊不會影響其他功能的運行。,1. Node.js模塊化開發(fā),Node.js規(guī)定一個JavaScript文件就是一個模塊，模塊內(nèi)部定義

2、的變量和函數(shù)默認情況下在外部無法得到,1.4 Node.js中模塊化開發(fā)規(guī)范,模塊內(nèi)部可以使用exports對象進行成員導(dǎo)出， 使用require方法導(dǎo)入其他模塊。,exports.加法 = 加法 exports.減法 = 減法,A模塊 = require(A模塊) A模塊.加法() A模塊.減法(),1.5 模塊成員導(dǎo)出,1. Node.js模塊化開發(fā),/ a.js / 在模塊內(nèi)部定義變量 let version = 1.0; / 在模塊內(nèi)部定義方法 const sayHi = name = 您好, $name; / 向模塊外部導(dǎo)出數(shù)據(jù) exports.version = version;

3、exports.sayHi = sayHi;,/ b.js / 在b.js模塊中導(dǎo)入模塊a let a = require(./b.js); / 輸出b模塊中的version變量 console.log(a.version); / 調(diào)用b模塊中的sayHi方法 并輸出其返回值 console.log(a.sayHi(黑馬講師);,1.6 模塊成員的導(dǎo)入,1. Node.js模塊化開發(fā),導(dǎo)入模塊時后綴可以省略,1.7 模塊成員導(dǎo)出的另一種方式,1. Node.js模塊化開發(fā),exports是module.exports的別名(地址引用關(guān)系)，導(dǎo)出對象最終以module.exports為準,1.8

4、 模塊導(dǎo)出兩種方式的聯(lián)系與區(qū)別,1. Node.js模塊化開發(fā),Contents,目,錄,Node.js模塊化開發(fā) 系統(tǒng)模塊 第三方模塊 package.json文件 Node.js中模塊的加載機制,3. 系統(tǒng)模塊,Node運行環(huán)境提供的API. 因為這些API都是以模塊化的方式進行開發(fā)的, 所以我們又稱Node運行環(huán)境提供的API為系統(tǒng)模塊,3.1 什么是系統(tǒng)模塊,const fs = require(fs);,3. 系統(tǒng)模塊,f：file 文件 ，s：system 系統(tǒng)，文件操作系統(tǒng)。,fs.reaFile(文件路徑/文件名稱,文件編碼, callback);,讀取文件內(nèi)容,3.2 系統(tǒng)模

5、塊fs 文件操作,3.2 系統(tǒng)模塊fs 文件操作,3. 系統(tǒng)模塊,fs.writeFile(文件路徑/文件名稱, 數(shù)據(jù), callback);,寫入文件內(nèi)容,const content = 正在使用fs.writeFile寫入文件內(nèi)容; fs.writeFile(./index.html, content, err = if (err != null) console.log(err); return; console.log(文件寫入成功); );,3.3 系統(tǒng)模塊path 路徑操作,3. 系統(tǒng)模塊,為什么要進行路徑拼接,不同操作系統(tǒng)的路徑分隔符不統(tǒng)一,Windows 上是 /,Linux

6、上是/,/public/uploads/avatar,3. 系統(tǒng)模塊,/ 導(dǎo)入path模塊 const path = require(path); / 路徑拼接 let finialPath = path.join(itcast, a, b, c.css); / 輸出結(jié)果 itcastabc.css console.log(finialPath);,path.join(路徑, 路徑, .),3.4 路徑拼接語法,3.5 相對路徑VS絕對路徑,大多數(shù)情況下使用絕對路徑，因為相對路徑有時候相對的是命令行工具的當前工作目錄 在讀取文件或者設(shè)置文件路徑時都會選擇絕對路徑 使用_dirname獲取當前文

7、件所在的絕對路徑,3. 系統(tǒng)模塊,Contents,目,錄,Node.js模塊化開發(fā) 系統(tǒng)模塊 第三方模塊 package.json文件 Node.js中模塊的加載機制,別人寫好的、具有特定功能的、我們能直接使用的模塊即第三方模塊，由于第三方模塊通常都是由多個文件組成并且被放置在一個文件夾中，所以又名包。,4. 第三方模塊,4.1 什么是第三方模塊,第三方模塊有兩種存在形式：,以js文件的形式存在，提供實現(xiàn)項目具體功能的API接口。 以命令行工具形式存在，輔助項目開發(fā),4.2 獲取第三方模塊,4. 第三方模塊,：第三方模塊的存儲和分發(fā)倉庫,下載：npm install 模塊名稱 卸載：npm

8、unintall package 模塊名稱,4.2 獲取第三方模塊,4. 第三方模塊,npm (node package manager) ： node的第三方模塊管理工具,全局安裝與本地安裝 命令行工具：全局安裝 庫文件：本地安裝,nodemon是一個命令行工具，用以輔助項目開發(fā)。 在Node.js中，每次修改文件都要在命令行工具中重新執(zhí)行該文件，非常繁瑣。,4.3 第三方模塊 nodemon,4. 第三方模塊,使用步驟,使用npm install nodemon g 下載它 在命令行工具中用nodemon命令替代node命令執(zhí)行文件,4.4 第三方模塊 nrm,nrm ( npm regi

9、stry manager )：npm下載地址切換工具,4. 第三方模塊,npm默認的下載地址在國外，國內(nèi)下載速度慢,使用步驟,使用npm install nrm g 下載它 查詢可用下載地址列表 nrm ls 切換npm下載地址 nrm use 下載地址名稱,4.5 第三方模塊 Gulp,基于node平臺開發(fā)的前端構(gòu)建工具 將機械化操作編寫成任務(wù), 想要執(zhí)行機械化操作時執(zhí)行一個命令行命令任務(wù)就能自動執(zhí)行了 用機器代替手工，提高開發(fā)效率。,4. 第三方模塊,4.6 Gulp能做什么,項目上線，HTML、CSS、JS文件壓縮合并 語法轉(zhuǎn)換（es6、less .） 公共文件抽離 修改文件瀏覽器自動刷

10、新,4. 第三方模塊,4.7 Gulp使用,使用npm install gulp下載gulp庫文件 在項目根目錄下建立gulpfile.js文件 重構(gòu)項目的文件夾結(jié)構(gòu) src目錄放置源代碼文件 dist目錄放置構(gòu)建后文件 在gulpfile.js文件中編寫任務(wù). 在命令行工具中執(zhí)行g(shù)ulp任務(wù),4. 第三方模塊,1. Node.js中的模塊化開發(fā),4.8 Gulp中提供的方法,gulp.src()：獲取任務(wù)要處理的文件 gulp.dest()：輸出文件 gulp.task()：建立gulp任務(wù) gulp.watch()：監(jiān)控文件的變化,const gulp = require(gulp); /

11、 使用gulp.task()方法建立任務(wù) gulp.task(first, () = / 獲取要處理的文件 gulp.src(./src/css/base.css) / 將處理后的文件輸出到dist目錄 .pipe(gulp.dest(./dist/css); );,4.9 Gulp插件,gulp-htmlmin ：html文件壓縮 gulp-csso ：壓縮css gulp-babel ：JavaScript語法轉(zhuǎn)化 gulp-less: less語法轉(zhuǎn)化 gulp-uglify ：壓縮混淆JavaScript gulp-file-include 公共文件包含 browsersync 瀏覽器

12、實時同步,4. 第三方模塊,Contents,目,錄,Node.js模塊化開發(fā) 系統(tǒng)模塊 第三方模塊 package.json文件 Node.js中模塊的加載機制,6. package.json文件,6.1 node_modules文件夾的問題,文件夾以及文件過多過碎，當我們將項目整體拷貝給別人的時候,，傳輸速度會很慢很慢. 復(fù)雜的模塊依賴關(guān)系需要被記錄，確保模塊的版本和當前保持一致，否則會導(dǎo)致當前項目運行報錯,6. package.json文件,項目描述文件，記錄了當前項目信息，例如項目名稱、版本、作者、github地址、當前項目依賴了哪些第三方模塊等。 使用npm init -y命令生成。

13、,6.2 package.json文件的作用,6. package.json文件, dependencies: jquery: 3.3.1“ ,6.3 項目依賴,在項目的開發(fā)階段和線上運營階段，都需要依賴的第三方包，稱為項目依賴 使用npm install 包名命令下載的文件會默認被添加到 package.json 文件的 dependencies 字段中,6. package.json文件,6.4 開發(fā)依賴,在項目的開發(fā)階段需要依賴，線上運營階段不需要依賴的第三方包，稱為開發(fā)依賴 使用npm install 包名 -save-dev命令將包添加到package.json文件的devDepen

14、dencies字段中, devDependencies: gulp: 3.9.1“ ,6. package.json文件,6.5 package-lock.json文件的作用,鎖定包的版本，確保再次下載時不會因為包版本不同而產(chǎn)生問題 加快下載速度，因為該文件中已經(jīng)記錄了項目所依賴第三方包的樹狀結(jié)構(gòu)和包的下載地址，重新安裝時只需下載即可，不需要做額外的工作,Contents,目,錄,Node.js模塊化開發(fā) 系統(tǒng)模塊 第三方模塊 package.json文件 Node.js中模塊的加載機制,5. Node.js中模塊加載機制,5.1 模塊查找規(guī)則-當模塊擁有路徑但沒有后綴時,require方法根據(jù)模塊路徑查找模塊，如果是完整路徑，直接引入模塊。 如果模塊后綴省略，先找同名JS文件再找同名JS文件夾 如果找到了同名文件夾，找文件夾中的index.js 如果文件夾中沒有index.js就會去當前文件夾中的package.json文件中查找main選項中的入口文件 如果找指定的入口文件不存在或者沒有指定入口文件就會報錯，模塊沒有被找到,require(./find