JS在使用時(shí)存在兩大問題：文件依賴和命名沖突
在復(fù)用某些js文件時(shí)，模塊化使文件不再依賴，抽離某一模塊不會(huì)影響整體，文件與文件之間半封閉，同名變量可以在不同文件間共存。

一、Node.js中模塊化開發(fā)規(guī)范

• Node.js規(guī)定一個(gè)JS文件就是一個(gè)模塊，模塊內(nèi)部定義的變量和函數(shù)默認(rèn)情況下在外部無法得到；
• 模塊內(nèi)部可以用exports對(duì)象進(jìn)行成員導(dǎo)出，使用require方法導(dǎo)入其他模塊。

1.1模塊成員導(dǎo)出

//a.js文件
//在模塊內(nèi)部定義變量
let version = 1.0;
const sayHi = name =>`您好，$(name)`;
//向模塊外部導(dǎo)出數(shù)據(jù)
exports.version = version;
exports.sayHi = sayHi;

1.2模塊成員的導(dǎo)入

//b.js文件
//在b.js模塊中導(dǎo)入模塊a
let a = require('./b.js');
//輸出b模塊中的version變量
console.log(a.version);
//輸出b模塊中的sayHi方法并輸出其返回值
console.log(a.sayHi('黑馬講師'));

示例

//a.js
const add = (n1, n2) => n1 + n2;

exports.add = add;
//b.js
const a = require('./03.module-a.js');
console.log(a.add(10, 20));

1.3另一種導(dǎo)入方法

exports是module.exports的別名（地址引用關(guān)系），如果兩個(gè)值不同，導(dǎo)出對(duì)象最終以module.exports為準(zhǔn)
示例

//a.js文件
const greeting = name => `hello ${name}`;
module.exports.greeting = greeting;
//b.js文件
const a = require('./04.module.exports.js');
console.log(a.greeting('zhangsan'));

二、系統(tǒng)模塊

2.1 什么是系統(tǒng)模塊

• Node運(yùn)行環(huán)境提供的API，因?yàn)檫@些API都是以模塊化的方式進(jìn)行開發(fā)的，所以我們又稱Node運(yùn)行環(huán)境提供的API為系統(tǒng)模塊

2.2 系統(tǒng)模塊fs 文件操作

• f:file文件，s:system系統(tǒng)，文件操作系統(tǒng)

const fs = require('fs');

2.2.1 讀取文件內(nèi)容(帶中括號(hào)的是可選參數(shù))

fs.reaFile('文件路徑/文件名稱' 【,'文件編碼'】，callback);

示例

//1.通過模塊的名字fs對(duì)模塊進(jìn)行引用
const fs = require('fs');

//2.通過模塊內(nèi)部的readFile讀取文件內(nèi)容
fs.readFile('./新建文本文檔.txt', 'utf8', (err, doc) => {
    //如果文件讀取出錯(cuò) err是一個(gè)對(duì)象 包含錯(cuò)誤信息
    //如果文件讀取正確 err是null
    //doc是文件讀取的結(jié)果
    console.log(err);
    console.log(doc);
});

2.2.2 寫入文件內(nèi)容

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

示例（沒有寫入的txt會(huì)自動(dòng)新建一個(gè)txt文件）

const fs = require('fs');
fs.writeFile('./demo.txt', '即將要寫入的內(nèi)容', err => {
    if (err != null) {
        console.log(err);
        return;
    }

    console.log('文件內(nèi)容寫入成功');
})

2.2.3 系統(tǒng)模塊path 路徑操作

• 為什么要進(jìn)行路徑拼接
  1.不同操作系統(tǒng)的路徑分隔符不統(tǒng)一
  2./public/uploads/avatar
  3.Windows上是\ /
  4.Linux上是/

• 路徑拼接語(yǔ)法

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

//導(dǎo)入path模塊
const path = require('path');
//路徑拼接
let finialPath = path.join('itcast','a','b','c.css');
//輸出結(jié)果itcast\a\c\c.css
console.log(finialPath);

2.2.4 相對(duì)路徑VS絕對(duì)路徑

• 大多數(shù)情況下使用絕對(duì)路徑，因?yàn)橄鄬?duì)路徑有時(shí)候相對(duì)的是命令行工具的當(dāng)前工作目錄；
• 在讀取文件或者設(shè)置文件路徑時(shí)都會(huì)選擇絕對(duì)路徑
• 可以使用_dirname獲取當(dāng)前文件所在的絕對(duì)路徑，可以得到絕對(duì)路徑之后再通過路徑拼接拼接上文件名

示例

const fs = require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, 'hellonode.js'));

fs.readFile(path.join(__dirname, 'hellonode.js'), 'utf8', (err, doc) => {
    console.log(err)
    console.log(doc)
});

三、第三方模塊

3.1 什么是第三方模塊

由于第三方模塊通常都由多個(gè)文件組成并且被放置在一個(gè)文件夾中，所以又名為包。

第三方模塊有兩種形式：

• 以js文件的形式存在，提供實(shí)現(xiàn)項(xiàng)目具體功能的API接口。

npmjs.com：第三方模塊的存儲(chǔ)和分發(fā)倉(cāng)庫(kù)

3.2 獲取第三方模塊

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

• 下載：npm install 模塊名稱
• 卸載：npm uninstall 模塊名稱

全局安裝與本地安裝

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

3.3 第三方模塊 nodemon

nodemon是一個(gè)命令行工具，用以輔助項(xiàng)目開發(fā)
在Node.js中，每次修改文件都要在命令行工具中重新執(zhí)行該文件

使用步驟

• 1.使用npm install nodemon -g 進(jìn)行全局安裝
• 2.在命令行工具中使用nodemon命令代替node命令執(zhí)行文件

nodemon模式下ctrl+c退出

3.4 第三方模塊 nrm

nrm（npm registry manager):npm下載地址切換工具
npm默認(rèn)的下載地址在國(guó)外，國(guó)內(nèi)下載速度慢
使用步驟：

• 1.使用npm install nrm -g 下載它
• 2.查詢可用下載地址列表nrm Is

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

  
  
  687a39a911bdb9115c2bcf9c247fdb9.png

圖中，前面帶星號(hào)的即是當(dāng)前的默認(rèn)下載地址，使用nrm use taobao即可更改默認(rèn)地址到taobao

3.5 第三方模塊 Gulp

基于node平臺(tái)開發(fā)的前端構(gòu)建工具
將機(jī)械化操作編寫成任務(wù)，想要執(zhí)行機(jī)械化操作時(shí)執(zhí)行一個(gè)命令行命令任務(wù)就能自動(dòng)執(zhí)行了

3.5.1 Gulp能做什么

• 項(xiàng)目上線，HTML、CSS、JS文件壓縮合并
• 語(yǔ)法轉(zhuǎn)換（es6、less...）【瀏覽器無法識(shí)別less語(yǔ)法】

3.5.2 Gulp使用

• 1.使用npm install gulp下載gulp庫(kù)文件
• 2.在項(xiàng)目根目錄下建立gulpfile.js文件【注：此js文件名是固定的】
• 3.重構(gòu)項(xiàng)目的文件夾結(jié)構(gòu)src目錄放置源代碼文件，新建dist目錄放置構(gòu)建后的文件
• 4.在gulpfile.js文件中編寫任務(wù)
• 5.在命令行工具中執(zhí)行g(shù)ulp任務(wù)

3.5.3 Gulp中提供的方法

• gulp.src()：獲取任務(wù)要處理的文件
• gulp.dest()：輸出文件 必須與pipe聯(lián)合使用
• gulp.task()：建立gulp任務(wù) task的第一個(gè)參數(shù)是gulp的任務(wù)名稱，第二個(gè)參數(shù)是回調(diào)函數(shù)，自動(dòng)執(zhí)行
• gulp.watch()：監(jiān)控文件的變化

const gulp = require('gulp');
//使用gulp.task()方法建立任務(wù)
gulp.task('first',()=>{
  //獲取要處理的文件
  gulp.src('./src/css/base.css')
  //將處理后的文件輸出到dist目錄
  .pipe(gulp.dest('./dist/css'));
)）；

安裝gulp命令行工具

npm install gulp-cli -g

安裝以后可以使用類似node的功能：gulp

示例
gulp的文件拷貝操作,gulp的first任務(wù)將./src/css/base.css下的base.css文件復(fù)制到了dist文件夾下的css文件夾

//引用gulp模塊
const gulp = require('gulp');
//使用gulp.task建立任務(wù)
//1.任務(wù)的名稱
//2.任務(wù)的回調(diào)函數(shù)
gulp.task('first', done => {
    console.log('第一個(gè)gulp任務(wù)');i
    //1.使用gulp.src獲取要處理的文件
    gulp.src('./src/css/base.css')
        //gulp可以創(chuàng)建不存在的文件
        .pipe(gulp.dest('dist/css'));
    done();
});

3.6 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：瀏覽器實(shí)時(shí)同步