前端nodejs模塊化

模塊化的概念

相對于其他靜態語言，JS最大缺陷就是天生不具有模塊化，沒有語言層面的命名空間的概念，問題如下：

1. 撰寫通用模塊很容易將其暴露給全域作用域，造成命名沖突，
2. 瀏覽器按照從上到下決議HTML檔案，多個<script>標簽按照次序決議加載，這種機制導致存在依賴關系的JS模塊，必須被依賴者先執行，依賴者后執行，比如使用jquery時，必須先匯入jquery：

<script src='jquery.js'></script>
<script src='jquery.plugin.js'></script>

一直以來，前端工程師們都在探索如何做到JavaScript模塊化，其中以CommonJS，AMD，CMD為代表，

直到ES6 Module的出現，才從語言層面上解決了JS模塊化的問題，

1.什么是模塊化？（在一個js檔案中使用另一個js檔案的資料）

1. 模塊化是指解決一個復雜問題時，自頂向下逐層把系統劃分成若干模塊的程序，對于整個系統來說，模塊是可組合、分解和更換的單元

2. 編程領域中的模塊化，就是遵守固定的規則，把一個大檔案拆成獨立并互相依賴的多個小模塊

3. 把代碼進行模塊化拆分的好處

   • 提高了代碼的復用性

   • 提高了代碼的可維護性

   • 可以實作按需加載

   • 避免命名沖突
   • 依賴管理

2.Node 中模塊的 3 個大類

Node.js 中根據模塊來源的不同，將模塊分為了 3 大類，分別是：

1. 內置模塊（內置模塊是由 Node.js 官方提供的，例如 fs、path、http 等）

2. 自定義模塊（用戶創建的每個 .js 檔案，都是自定 義模塊）

3. 第三方模塊（由第三方開發出來的模塊，并非官方提供的內置模塊，也不是用戶創建的自定義模塊，使用前需要先下載） 第三方模塊又稱為包，

3.使用 require 方法加載模塊

// 1. 加載內置的 fs 模塊
const fs = require('fs')

// 2. 加載用戶的自定義模塊          require（相對路徑地址）  
const custom = require('./custom.js')

// 3. 加載第三方模塊，(使用第三方模塊，下面會進行講解)
const moment = require('moment')

注意事項 1： 使用 require() 方法加載其他模塊時，會執行被加載模塊中的代碼

注意事項2： 在使用 require 加載用戶自定義模塊期間，可以省略 .js 后綴名

4.自定義模塊的匯入與匯出

1.匯入：require()

2.匯出：

a. 了解 module 物件

在每個 .js 自定義模塊中都有一個 module 物件，它里面存盤了和當前模塊有關的資訊，列印如下：

b. 了解 module.exports物件的作用

1. 在自定義模塊中，可以使用 `module.exports` 物件，將模塊內的成員共享出去，供外界使用

2. 外界用 `require()` 方法匯入自定義模塊時，得到的就是 `module.exports` 所指向的物件（默認為空物件{ } ）

c. 使用 module.exports || exporets 向外共享成員

exports 和 module.exports 指向同一個物件，最終共享的結果，還是以 module.exports 指向的物件為準

注意：為了防止混亂，建議大家不要在同一個模塊中同時使用 exports 和 module.exports

// 加載模塊.js
const mo = require('./被加載的模塊.js')

console.log(mo)

// 被加載的模塊.js
const age = 18
// 向 module.exports 物件上掛載 username 屬性
module.exports.username = 'zs'

// 向 module.exports 物件上掛載 sayHello 方法
module.exports.sayHello = function () {
  console.log('Hellp')
}

5.CommonJS 模塊化規范

1. Node.js 遵循了 CommonJS 模塊化規范，CommonJS規定了模塊的特性和各模塊之間如何相互依賴

2. CommonJS 規定：

   • 每個模塊內部，module 變數代表當前模塊

   • module 變數是一個物件，它的 exports 屬性（即 module.exports）是對外的介面

   • 加載某個模塊，其實是加載該模塊的 module.exports 屬性，require() 方法用于加載模塊，

6.包（即上文提到的第三方模塊 ）

1. 包的來源

1. 不同于 Node.js 中的內置模塊與自定義模塊，包是由第三方個人或團隊開發出來的，免費供所有人使用

2. 注意： Node.js 中的包都是免費且開源的，不需要付費即可免費下載使用

2. 為什么需要包

1. 由于 Node.js 的內置模塊僅提供了一些底層的 API，導致在基于內置模塊進行專案開發的時，效率很低

2. 包是基于內置模塊封裝出來的，提供了更高級、更方便的 API，極大的提高了開發效率

3. 包和內置模塊之間的關系，類似于 jQuery 和 瀏覽器內置 API 之間的關系

3. 從哪里下載包

在學習和實際開發中，下載包，都是從 npm 這個網站下載

4.如何下載包

1. 下載包使用 npm ，全名叫做 Node Package Manager（簡稱 npm 包管理工具），這個包管理工具隨著 Node.js 的安裝包一起被安裝到了用戶的電腦上，

2. 可以在終端中執行 npm -v 命令，來查看自己電腦上所安裝的 npm 包管理工具的版本號

5. npm install 命令安裝包

1. 如果想在專案中安裝指定名稱的包，需要運行如下的命令

   npm install 包的完整名稱

2. 可以簡寫成如下格式

   npm i 包的完整名稱

6.node_modules 和 pageage-lock.json 的作用

初次裝包完成后，在專案檔案夾下多一個叫做 node_modules 的檔案夾和 package-lock.json 的組態檔，他們的作用是：

1. node_modules 檔案夾用來存放所有已安裝到專案中的包，require() 匯入第三方包時，就是從這個目錄中查找并加載包

2. package-lock.json 組態檔用來記錄 node_modules 目錄下的每一個包的下載資訊，例如包的名字、版本號、下載地址等

7.安裝指定版本的包

默認情況下，使用 npm install 命令安裝包的時候，會自動安裝最新版本的包，如果需要安裝指定版本的包，可以在包名之后，通過 @符號指定具體的版本，例如：

npm i dayjs@2.22.2

8. 包管理配置的概念

npm 規定，在專案根目錄中，必須提供一個叫做 package.json 的包管理組態檔，用來記錄與專案有關的一些配置資訊，例如：

• 專案的名稱、版本號、描述等

• 專案中都用到了哪些包

• 哪些包只會在開發期間會用到

• 哪些包在開發和部署時都需要用到

9. package.json 組態檔的作用

1. 第三方包的體積過大，不方便團隊成員之間共享專案源代碼,共享時需要剔除node_modules

2. 在專案根目錄中，創建一個叫做 package.json的組態檔，即可用來記錄專案中安裝了哪些包，從而方便剔除 node_modules 目錄之后，在團隊成員之間共享專案的源代碼

3. 在專案開發中，把 node_modules 檔案夾，添加到 .gitignore 忽略檔案中

10.快速創建 package.json

npm 包管理工具提供了一個快捷命令，可以在執行命令時所處的目錄中，快速創建 package.json 這個包管理組態檔

npm init -y

注意：

1. 上述命令只能在英文的目錄下成功運行！所以，專案檔案夾的名稱一定要使用英文命名，不要使用中文，不能出現空格

2. 運行 npm install 命令安裝包的時候，npm 包管理工具會自動把包的名稱和版本號，記錄到 package.json 中

11.了解 dependencies 節點的作用

package.json 檔案中，有一個 dependencies 節點，專門用來記錄您使用 npm install 命令安裝了哪些包

// 安裝一個包
npm i xxx
?
// 安裝多個包 (多個包之間用空格隔開)
npm i xxx1  xxx2 

12. 一次性安裝所有的包

1. 當我們拿到一個剔除了 node_modules 的專案之后，需要先把所有的包下載到專案中，才能將專案運行起來，否則會報類似于下面的錯誤：

2. 可以運行 npm install 命令（或 npm i）一次性安裝所有的依賴包

13. 卸載包

1. 可以運行 npm uninstall 命令，來卸載指定的包：

2. 注意：npm uninstall 命令執行成功后，會把卸載的包，自動從 package.json 的 dependencies 中移除掉

14. 了解 devDependencies 節點的作用

1. 如果某些包只在專案開發階段會用到，在專案上線之后不會用到，則建議把這些包記錄到 devDependencies 節點中

2. 與之對應的，如果某些包在開發和專案上線之后都需要用到，則建議把這些包記錄到 dependencies 節點中

3. 您可以使用如下的命令，將包記錄到 devDependencies 節點中