Node.js 如何處理 ES6 模塊

學習 JavaScript 語言，你會發現它有兩種格式的模塊。

一種是 ES6 模塊，簡稱 ESM；另一種是 Node.js 專用的 CommonJS 模塊，簡稱 CJS。這兩種模塊不兼容。

很多人使用 Node.js，只會用require()加載模塊，遇到 ES6 模塊就不知道該怎麼辦。本文就來談談，ES6 模塊在 Node.js 裡面怎麼使用。

一、兩種模塊的差異

ES6 模塊和 CommonJS 模塊有很大的差異。

語法上面，CommonJS 模塊使用require()加載和module.exports輸出，ES6 模塊使用import和export。

用法上面，require()是同步加載，後面的代碼必須等待這個命令執行完，才會執行。import命令則是異步加載，或者更準確地說，ES6 模塊有一個獨立的靜態解析階段，依賴關係的分析是在那個階段完成的，最底層的模塊第一個執行。

二、Node.js 的區分

Node.js 要求 ES6 模塊採用.mjs後綴文件名。也就是說，只要腳本文件裡面使用import或者export命令，那麼就必須採用.mjs後綴名。Node.js 遇到.mjs文件，就認為它是 ES6 模塊，默認啟用嚴格模式，不必在每個模塊文件頂部指定"use strict"。

如果不希望將後綴名改成.mjs，可以在項目的package.json文件中，指定type字段為module。


{
   "type": "module"
}

一旦設置了以後，該目錄裡面的 JS 腳本，就被解釋用 ES6 模塊。


# 解釋成 ES6 模塊
$ node my-app.js

如果這時還要使用 CommonJS 模塊，那麼需要將 CommonJS 腳本的後綴名都改成.cjs。如果沒有type字段，或者type字段為commonjs，則.js腳本會被解釋成 CommonJS 模塊。

總結為一句話：.mjs文件總是以 ES6 模塊加載，.cjs文件總是以 CommonJS 模塊加載，.js文件的加載取決於package.json裡面type字段的設置。

注意，ES6 模塊與 CommonJS 模塊儘量不要混用。require命令不能加載.mjs文件，會報錯，只有import命令才可以加載.mjs文件。反過來，.mjs文件裡面也不能使用require命令，必須使用import。

三、CommonJS 模塊加載 ES6 模塊

CommonJS 的require()命令不能加載 ES6 模塊，會報錯，只能使用import()這個方法加載。


(async () => {
  await import('./my-app.mjs');
})();

上面代碼可以在 CommonJS 模塊中運行。

require()不支持 ES6 模塊的一個原因是，它是同步加載，而 ES6 模塊內部可以使用頂層await命令，導致無法被同步加載。

四、ES6 模塊加載 CommonJS 模塊

ES6 模塊的import命令可以加載 CommonJS 模塊，但是隻能整體加載，不能只加載單一的輸出項。


// 正確
import packageMain from 'commonjs-package';

// 報錯
import { method } from 'commonjs-package';

這是因為 ES6 模塊需要支持靜態代碼分析，而 CommonJS 模塊的輸出接口是module.exports，是一個對象，無法被靜態分析，所以只能整體加載。

加載單一的輸出項，可以寫成下面這樣。


import packageMain from 'commonjs-package';
const { method } = packageMain;

五、同時支持兩種格式的模塊

一個模塊同時要支持 CommonJS 和 ES6 兩種格式，也很容易。

如果原始模塊是 ES6 格式，那麼需要給出一個整體輸出接口，比如export default obj，使得 CommonJS 可以用import()進行加載。

如果原始模塊是 CommonJS 格式，那麼可以加一個包裝層。


import cjsModule from '../index.js';
export const foo = cjsModule.foo;

上面代碼先整體輸入 CommonJS 模塊，然後再根據需要輸出具名接口。

你可以把這個文件的後綴名改為.mjs，或者將它放在一個子目錄，再在這個子目錄裡面放一個單獨的package.json文件，指明{ type: "module" }。

另一種做法是在package.json文件的exports字段，指明兩種格式模塊各自的加載入口。


"exports"：{ 
    "require": "./index.js"，
    "import": "./esm/wrapper.js" 
}

上面代碼指定require()和import，加載該模塊會自動切換到不一樣的入口文件。

（完）

推薦訂閱源