02模塊加載及包

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

2、的變量和函數(shù)默認(rèn)情況下在外部無(wú)法得到,1.4 Node.js中模塊化開(kāi)發(fā)規(guī)范,模塊內(nèi)部可以使用exports對(duì)象進(jìn)行成員導(dǎo)出， 使用require方法導(dǎo)入其他模塊。,exports.加法 = 加法 exports.減法 = 減法,A模塊 = require(A模塊) A模塊.加法() A模塊.減法(),1.5 模塊成員導(dǎo)出,1. Node.js模塊化開(kāi)發(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模塊化開(kāi)發(fā),導(dǎo)入模塊時(shí)后綴可以省略,1.7 模塊成員導(dǎo)出的另一種方式,1. Node.js模塊化開(kāi)發(fā),exports是module.exports的別名(地址引用關(guān)系)，導(dǎo)出對(duì)象最終以module.exports為準(zhǔn),1.8

4、 模塊導(dǎo)出兩種方式的聯(lián)系與區(qū)別,1. Node.js模塊化開(kāi)發(fā),Contents,目,錄,Node.js模塊化開(kāi)發(fā) 系統(tǒng)模塊 第三方模塊 package.json文件 Node.js中模塊的加載機(jī)制,3. 系統(tǒng)模塊,Node運(yùn)行環(huán)境提供的API. 因?yàn)檫@些API都是以模塊化的方式進(jìn)行開(kāi)發(fā)的, 所以我們又稱(chēng)Node運(yùn)行環(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(文件路徑/文件名稱(chēng),文件編碼, callback);,讀取文件內(nèi)容,3.2 系統(tǒng)模

5、塊fs 文件操作,3.2 系統(tǒng)模塊fs 文件操作,3. 系統(tǒng)模塊,fs.writeFile(文件路徑/文件名稱(chēng), 數(shù)據(jù), callback);,寫(xiě)入文件內(nèi)容,const content = 正在使用fs.writeFile寫(xiě)入文件內(nèi)容; fs.writeFile(./index.html, content, err = if (err != null) console.log(err); return; console.log(文件寫(xiě)入成功); );,3.3 系統(tǒng)模塊path 路徑操作,3. 系統(tǒng)模塊,為什么要進(jìn)行路徑拼接,不同操作系統(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 路徑拼接語(yǔ)法,3.5 相對(duì)路徑VS絕對(duì)路徑,大多數(shù)情況下使用絕對(duì)路徑，因?yàn)橄鄬?duì)路徑有時(shí)候相對(duì)的是命令行工具的當(dāng)前工作目錄 在讀取文件或者設(shè)置文件路徑時(shí)都會(huì)選擇絕對(duì)路徑 使用_dirname獲取當(dāng)前文

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

8、unintall package 模塊名稱(chēng),4.2 獲取第三方模塊,4. 第三方模塊,npm (node package manager) ： node的第三方模塊管理工具,全局安裝與本地安裝 命令行工具：全局安裝 庫(kù)文件：本地安裝,nodemon是一個(gè)命令行工具，用以輔助項(xiàng)目開(kāi)發(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默認(rèn)的下載地址在國(guó)外，國(guó)內(nèi)下載速度慢,使用步驟,使用npm install nrm g 下載它 查詢(xún)可用下載地址列表 nrm ls 切換npm下載地址 nrm use 下載地址名稱(chēng),4.5 第三方模塊 Gulp,基于node平臺(tái)開(kāi)發(fā)的前端構(gòu)建工具 將機(jī)械化操作編寫(xiě)成任務(wù), 想要執(zhí)行機(jī)械化操作時(shí)執(zhí)行一個(gè)命令行命令任務(wù)就能自動(dòng)執(zhí)行了 用機(jī)器代替手工，提高開(kāi)發(fā)效率。,4. 第三方模塊,4.6 Gulp能做什么,項(xiàng)目上線(xiàn)，HTML、CSS、JS文件壓縮合并 語(yǔ)法轉(zhuǎn)換（es6、less .） 公共文件抽離 修改文件瀏覽器自動(dòng)刷

10、新,4. 第三方模塊,4.7 Gulp使用,使用npm install gulp下載gulp庫(kù)文件 在項(xiàng)目根目錄下建立gulpfile.js文件 重構(gòu)項(xiàng)目的文件夾結(jié)構(gòu) src目錄放置源代碼文件 dist目錄放置構(gòu)建后文件 在gulpfile.js文件中編寫(xiě)任務(wù). 在命令行工具中執(zhí)行g(shù)ulp任務(wù),4. 第三方模塊,1. Node.js中的模塊化開(kāi)發(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語(yǔ)法轉(zhuǎn)化 gulp-less: less語(yǔ)法轉(zhuǎn)化 gulp-uglify ：壓縮混淆JavaScript gulp-file-include 公共文件包含 browsersync 瀏覽器

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

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

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