1. 回顧:node.js 中如何實現模塊化
node.js 遵循了 CommonJS 的模塊化規范。其中:
????????導入其它模塊使用 require() 方法
????????模塊對外共享成員使用 module.exports 對象
模塊化的好處: 大家都遵守同樣的模塊化規范寫代碼,降低了溝通的成本,極大方便了各個模塊之間的相互調用,利人利己。
2. 前端模塊化規范的分類
在 ES6 模塊化規范誕生之前,JavaScript 社區已經嘗試并提出了 AMD、CMD、CommonJS 等模塊化規范。
但是,這些由社區提出的模塊化標準,還是存在一定的差異性與局限性、并不是瀏覽器與服務器通用的模塊化標準,例如:
????????AMD 和 CMD 適用于瀏覽器端的 Javascript 模塊化
????????CommonJS 適用于服務器端的 Javascript 模塊化
太多的模塊化規范給開發者增加了學習的難度與開發的成本。因此,大一統的 ES6 模塊化規范誕生了!
3. 什么是 ES6 模塊化規范
ES6 模塊化規范是瀏覽器端與服務器端通用的模塊化開發規范。它的出現極大的降低了前端開發者的模塊化學習成本,開發者不需再額外學習 AMD、CMD 或 CommonJS 等模塊化規范。
ES6 模塊化規范中定義:
????????每個 js 文件都是一個獨立的模塊?
????????導入其它模塊成員使用 import 關鍵字 ?
????????向外共享模塊成員使用 export 關鍵字
4. 在 node.js 中體驗 ES6 模塊化
node.js 中默認僅支持 CommonJS 模塊化規范,若想基于 node.js 體驗與學習 ES6 的模塊化語法,可以按照如下兩個步驟進行配置:
????????①確保安裝了 v14.15.1 或更高版本的 node.js (node -v?查看node版本)
????????②在 package.json 的根節點中添加 "type":?"module" 節點(npm init -y 初始化包管理配置文件,注意:初始化包管理配置文件的時候,文件名不能是中文)
5. ES6 模塊化的基本語法
ES6 的模塊化主要包含如下 3 種用法:
????????①默認導出與默認導入
????????②按需導出與按需導入
????????③直接導入并執行模塊中的代碼
5.1 默認導出與默認導入
①默認導出
????????默認導出的語法: export default 默認導出的成員
?默認導出的注意事項:每個模塊中,只允許使用唯一的一次 export default,否則會報錯!
②默認導入
????????默認導入的語法: import 接收名稱 from '模塊標識符'
默認導入的注意事項:默認導入時的接收名稱可以任意名稱,只要是合法的成員名稱即可:

③按需導出
????????按需導出的語法: export 按需導出的成員
④按需導入
????????按需導入的語法: import { s1 } from '模塊標識符'
按需導出與按需導入的注意事項:
????????每個模塊中可以使用多次按需導出?
????????按需導入的成員名稱必須和按需導出的名稱保持一致?
????????按需導入時,可以使用 as 關鍵字進行重命名?
????????按需導入可以和默認導入一起使用
⑤直接導入并執行模塊中的代碼
如果只想單純地執行某個模塊中的代碼,并不需要得到模塊中向外共享的成員。此時,可以直接導入并執行模塊代碼,示例代碼如下: