Node.js v13.2.0 開始支持ES modules了

本文首發於公衆號：符合預期的CoyPan

寫在前面

Node.js 前不久發佈了v13.2.0，宣佈開始支持ES modules。在此以前，想要在node中使用ES modules，須要添加--experimental-module。v13.2.0版本後，能夠直接使用ES modules了。

在node中使用ES modules

想要在項目中使用ES modules，有如下兩種方法：

一、文件後綴名使用.mjs

舉個例子，假設項目目錄以下：

.
|____component
| |____a.mjs
|____index.mjs
複製代碼

文件內容以下：

// component/a.mjs
let a = 'This is component a';
export default a;

// index.mjs
import a from './component/a.mjs';
console.log(a);
複製代碼

執行node index.mjs，代碼能夠正確執行，輸出以下：

(node:77465) ExperimentalWarning: The ESM module loader is experimental.
This is component a
複製代碼

二、文件依然使用.js的後綴名，在項目的package.json中設置：type:module

項目目錄以下：

.
|____component
| |____a.js
|____package.json
|____index.js
複製代碼

各個文件內容以下：

// component/a.js
let a = 'This is component a';
export default a;

// index.js
import a from './component/a.mjs';
console.log(a);

// package.json
{
  ...
  "type": "module", // 必需要有這一行
  ...
}
複製代碼

執行node index.js，代碼能夠正確執行，輸出以下：

(node:78977) ExperimentalWarning: The ESM module loader is experimental.
This is component a
複製代碼

若是在命令行使用ES module，須要加上--input-type=module。舉個例子：

node --input-type=module --eval "import { sep } from 'path'; console.log(sep);"
複製代碼

須要注意的是，目前，ES module的實現仍是實驗性質的，後續有隨時調整的可能。

Import

import引入ES module時，支持如下幾種方式：

1. 相對路徑 (./file.mjs)
2. 絕對路徑 (file:///opt/app/file.mjs)
3. 模塊名 (es-module-package’)
4. 模塊內路徑 (es-module-package/lib/file.mjs)

另外，使用import引用ES module時，能夠像這樣使用：

1. import _ from ‘es-module-package’
2. import { shuffle } from ‘es-module-package
3. import * as fs from ‘fs

全部的Node內置模塊，例如fs和path，均支持上述三種方式來引用。

import 與 Commonjs

import也能夠引入Commonjs的模塊，包含如下兩種狀況：

• 模塊使用Commonjs規範編寫，而且後綴名爲：.cjs

例如代碼目錄以下：

.
|____component
| |____a.cjs
|____package.json
|____index.js
複製代碼

文件內容以下：

// component/a.cjs
let a = 'This is component a';
console.log('aaaa');
module.exports = a;

// index.js
import a from './component/a.cjs'; 
console.log(a);

// package.json
{
  ...
  "type": "module",
  ...
}
複製代碼

執行node index.js，代碼能夠正確執行，輸入以下：

(node:81677) ExperimentalWarning: The ESM module loader is experimental.
aaaa
This is component a
複製代碼

• 模塊擁有自身的package.json，沒有設置"type": "module"或設置"type": "commonjs"。 例如代碼目錄以下：

.
|____component
| |____a.js
| |____package.json
|____package.json
|____index.js
複製代碼

文件內容以下：

// component/a.js
let a = 'This is component a';
console.log('aaaa');
module.exports = a;

// component/package.json
{
  "type": "commonjs" // 也能夠不設置type字段
}

// index.js
import a from './component/a.js';
console.log(a);

// package.json
{
  ...
  "type": "module",
  ...
}
複製代碼

執行node index.js，代碼能夠正確執行，輸入以下：

(node:81677) ExperimentalWarning: The ESM module loader is experimental.
aaaa
This is component a
複製代碼

寫在後面

本文經過示例，簡單介紹了Node.js中ES Module的相關使用方法，更多詳細介紹請參考官方文檔：

nodejs.org/api/esm.htm…

---