Node.js模塊化開發以及模塊加載機制

一、Node.Js模塊化開發

1 JavaScript開發弊端
JavaScript在使用時存在兩大問題，文件依賴 和 命名衝突 。

2 生活中的模塊化開發

3 軟件中的模塊化開發
一個功能就是一個模塊，多個模塊可以組成完整應用，抽離一個模塊不會影響其他功能的運行。

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

5 模塊成員導出

 // a.js
  // 在模塊內部定義變量
 let version = 1.0;
 // 在模塊內部定義方法
 const sayHi = name => `您好, ${name}`;
 // 向模塊外部導出數據 
 exports.version = version;
 exports.sayHi = sayHi;

6 模塊成員的導入

 // b.js
  // 在b.js模塊中導入模塊a
 let a = require('./b.js');
  // 輸出b模塊中的version變量
 console.log(a.version);
  // 調用b模塊中的sayHi方法 並輸出其返回值
 console.log(a.sayHi('小明')); 

7 模塊成員導出的另一種方式

module.exports.version = version;
module.exports.sayHi = sayHi;

exports 是 module.exports 的別名**(地址引用關係)**，導出對象最終以module.exports爲準

8 模塊導出兩種方式的聯繫與區別

exports.version = version;
module.exports.version = version;
module.exports = { 
    name: 'zhangsan',
}

二、 系統模塊

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

2 系統模塊fs 文件操作
f：file 文件 ，s：system 系統，文件操作系統。

const fs = require('fs');

讀取文件內容

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

寫入文件內容

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

 const content = '<h3>正在使用fs.writeFile寫入文件內容</h3>';
 fs.writeFile('../index.html', content, err => {
   if (err != null) { 
       console.log(err);
       return;
   }
   console.log('文件寫入成功');
 });

3 系統模塊path 路徑操作

爲什麼要進行路徑拼接

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

4 路徑拼接法

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

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

5 相對路徑VS絕對路徑

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

三、 什麼是第三方模塊

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

第三方模塊有兩種存在形式：

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

2 獲取第三方模塊
npmjs.com：第三方模塊的存儲和分發倉庫

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

• 下載：npm install 模塊名稱
• 卸載：npm unintall package 模塊名稱
  全局安裝與本地安裝
• 命令行工具：全局安裝
• 庫文件：本地安裝

3 第三方模塊 nodemon
nodemon 是一個命令行工具，用以輔助項目開發。
在Node.js中，每次修改文件都要在命令行工具中重新執行該文件，非常繁瑣。
使用步驟

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

4 第三方模塊 nrm
***nrm ( npm registry manager )***：npm下載地址切換工具
npm 默認的下載地址在國外，國內下載速度慢

使用步驟

• 使用npm install nrm –g 下載它
• 查詢可用下載地址列表 nrm ls
• 切換npm下載地址 nrm use 下載地址名稱

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

6 Gulp能做什麼

• 項目上線，HTML、CSS、JS文件壓縮合並
• 語法轉換（es6、less …）
• 公共文件抽離
• 修改文件瀏覽器自動刷新

7 Gulp使用

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

8 Gulp中提供的方法

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

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

9 Gulp插件

• gulp-htmlmin ：html文件壓縮
• gulp-csso ：壓縮css
• gulp-babel ：JavaScript語法轉化
• gulp-less: less語法轉化
• gulp-uglify ：壓縮混淆JavaScript
• gulp-file-include 公共文件包含
• browsersync 瀏覽器實時同步

四、 package.json文件

1 node_modules文件夾的問題

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

2 package.json文件的作用
項目描述文件，記錄了當前項目信息，例如項目名稱、版本、作者、github地址、當前項目依賴了哪些第三方模塊等。
使用 npm init -y 命令生成。

3 項目依賴

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

 {
    "dependencies": {
        "jquery": "^4.3.1“
    }
 } 

4 開發依賴

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

 {
    "devDependencies": {
        "gulp": "^4.2.1“
    }
 }

5 package-lock.json文件的作用

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

五、Node.js中模塊加載機制

1 模塊查找規則-當模塊擁有路徑但沒有後綴時

require('./find.js');

require('./find');

1. require方法根據模塊路徑查找模塊，如果是完整路徑，直接引入模塊。
2. 如果模塊後綴省略，先找同名JS文件再找同名JS文件夾
3. 如果找到了同名文件夾，找文件夾中的index.js
4. 如果文件夾中沒有index.js就會去當前文件夾中的package.json文件中查找main選項中的入口文件
5. 如果找指定的入口文件不存在或者沒有指定入口文件就會報錯，模塊沒有被找到

2 模塊查找規則-當模塊沒有路徑且沒有後綴時

require('find');

1. Node.js會假設它是系統模塊
2. Node.js會去node_modules文件夾中
3. 首先看是否有該名字的JS文件
4. 再看是否有該名字的文件夾
5. 如果是文件夾看裏面是否有index.js
6. 如果沒有index.js查看該文件夾中的package.json中的main選項確定模塊入口文件
7. 否則找不到報錯