Nodejs 中 ES Modules 入門使用講解

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

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

刪除標誌也是將 ESM 變爲穩定性而邁出的重要一步，根據 Nodejs 官方的發佈說明，有望在今年下半年（10 月左右）刪除 Nodejs 12 中的警告，屆時 Node 14 將會成爲 LTS。

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
複製代碼

2020-05-26 Nodejs v12.17.0 LTS 版發佈，在這以前若是咱們使用 ES Modules 還須要加上標誌 --experimental-modules，而在本次版本發佈取消了這個標誌，本文也是對在 Nodejs 中使用 ES Modules 進行了入門講解，後續也會進行更深刻的研究分享，但願看完你能有所收穫。

做者簡介：五月君，軟件設計師，慕課網認證做者，熱愛技術、喜歡分享的 90 後青年，歡迎關注Github 開源項目 www.nodejs.red

Reference

• nodejs.org/en/blog/rel…
• nodejs.org/dist/latest…