Nodejs中ES Modules如何操作運用？本文詳解

2020-05-26 Nodejs v12.17.0 LTS 版發布，去掉 --experimental-modules 標志。

1、雖然已在最新的 LTS v12.17.0 中支持，但是目前仍處於 Stability: 1 - Experimental 實驗階段，如果是在生產環境使用該功能，還應保持謹慎，如果在測試環境可以安裝 n install v12.17.0 進行嘗試。

2、刪除標志也是將 ESM 變為穩定性而邁出的重要一步，根據 Nodejs 官方的發布說明，有望在今年下半年（10 月左右）刪除 Nodejs 12 中的警告，屆時 Node 14 將會成為 LTS。
3、除了node。結合多年開發經驗我還整理出2020最新企業級實戰視頻教程,包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！

ES Modules 基本使用

通過聲明 .mjs 后綴的文件或在 package.json 里指定 type 為 module 兩種方式使用 ES Modules，下面分別看下兩種的使用方式：

使用方式一

構建如下目錄結構

├── caculator.js
├── index.js
└── package.json
復制代碼

package.json

重點是將 type 設置為 module 來支持 ES Modules

{
  "name": "esm-project", "version": "1.0.0", "main": "index.js", "type": "module", ... } 復制代碼

caculator.js

export function add (a, b) { return a + b; }; 復制代碼

index.js

import { add } from './caculator.js'; console.log(add(4, 2)); // 6 復制代碼

運行

與當前的 v14.3.0 不同的是在 v12.17.0 中使用 ESM 運行時仍然會觸發一個 experimental 警告信息。

$ n run v12.17.0 index.js     
(node:6827) ExperimentalWarning: The ESM module loader is experimental.
6
復制代碼

$ n run v14.3.0 index.js 6 復制代碼

使用方式二

通過指定文件擴展名為 .mjs 與 CommonJS 模塊進行區分，這樣是不需要在 package.json 中指定 type 為 module。

在上述例子基礎上修改文件擴展名即可。

├── caculator.mjs
├── index.mjs
復制代碼

運行

$ n run v12.17.0 index.mjs     
(node:6827) ExperimentalWarning: The ESM module loader is experimental.
6
復制代碼

模塊導入導出的幾種方式

export 導出

export 用於對外輸出模塊，可導出常量、函數、文件等，相當於定義了對外的接口，兩種導出方式：

export: 使用 export 方式導出的，導入時要加上 {} 需預先知道要加載的變量名，在一個文件中可以使用多次。
export default: 為模塊指定默認輸出，這樣加載時就不需要知道所加載的模塊變量名，一個文件中僅可使用一次。

// caculator.js export function add (a, b) { return a + b; }; export function subtract (a, b) { return a - b; } const caculator = { add, subtract, } export default caculator; 復制代碼

import 導入

import 語句用於導入另一個模塊導出的綁定，三種導入方式：

導入默認值：導入在 export default 定義的默認接口。
as 別名導入：在導入時可以重命名在 export 中定義的接口。
單個或多個導入：根據需要導入 export 定一個的一個或多個接口。

import { add } from './caculator.js'; import caculator from './caculator.js'; import * as caculatorAs from './caculator.js'; add(4, 2) caculator.subtract(4, 2); caculatorAs.subtract(4, 2); 復制代碼

import 的動態導入

可以像調用函數一樣動態的導入模塊，它將返回一個 Promise，但是這種方式需要 Top-Level await 支持，如果你不知道 Top-Level await 是什么可以看下這篇文章 Nodejs v14.3.0 發布支持頂級 Await 和 REPL 增強功能。

現在我們有如下導出模塊 my-module.js：

const sleep = (value, ms) => new Promise(resolve => setTimeout(() => resolve(value), ms)); export const hello = await sleep('Hello', 1000); export const node = await sleep('Nodejs', 2000); export default function() { return 'this is a module'; } 復制代碼

在 index.js 中可以像如下形式進行動態導入：

console.log('Start loading module...') const myModule = await import('./my-module.js'); console.log('Output after 3000 ms.') console.log(myModule.hello); console.log(myModule.node); console.log(myModule.default()); 復制代碼

運行

$ n run v14.3.0 --experimental_top_level_await index.js
Start loading module...
Output after 3000 ms.
Hello
Nodejs
this is a module
復制代碼

總結：
1、2020-05-26 Nodejs v12.17.0 LTS 版發布，在這之前如果我們使用 ES Modules 還需要加上標志 --experimental-modules，而在本次版本發布取消了這個標志，本文也是對在 Nodejs 中使用 ES Modules 進行了入門講解，后續也會進行更深入的研究分享，希望看完你能有所收獲。

2、除了node。結合多年開發經驗我還整理出2020最新企業級實戰視頻教程，包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源於網絡加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯系我們以作處理