Webpack ECMAScript 模塊

ECMAScript 模塊（ESM）是在 Web 中使用模塊的規(guī)范。 所有現(xiàn)代瀏覽器均支持此功能，同時也是在 Web 中編寫模塊化代碼的推薦方式。

webpack 支持處理 ECMAScript 模塊以優(yōu)化它們。

導(dǎo)出

關(guān)鍵字 export 允許將 ESM 中的內(nèi)容暴露給其他模塊:

export const CONSTANT = 42;

export let variable = 42;
// 對外暴露的變量為只讀
// 無法從外部修改

export function fun() {
  console.log('fun');
}

export class C extends Super {
  method() {
    console.log('method');
  }
}

let a, b, other;
export { a, b, other as c };

export default 1 + 2 + 3 + more();

導(dǎo)入

關(guān)鍵字 import 允許從其他模塊獲取引用到 ESM 中:

import { CONSTANT, variable } from './module.js';
// 導(dǎo)入由其他模塊導(dǎo)出的“綁定”
// 這些綁定是動態(tài)的. 這里并非獲取到了值的副本
// 而是當(dāng)將要訪問“variable”時
// 再從導(dǎo)入的模塊中獲取當(dāng)前值

import * as module from './module.js';
module.fun();
// 導(dǎo)入包含所有導(dǎo)出內(nèi)容的“命名空間對象”

import theDefaultValue from './module.js';
// 導(dǎo)入 `default` 導(dǎo)出的快捷方式

將模塊標(biāo)記為 ESM

默認(rèn)情況下，webpack 將自動檢測文件是 ESM 還是其他模塊系統(tǒng)。

Node.js 通過設(shè)置 package.json 中的屬性來顯式設(shè)置文件模塊類型。 在 package.json 中設(shè)置 "type": "module" 會強(qiáng)制 package.json 下的所有文件使用 ECMAScript 模塊。 設(shè)置 ?"type": "commonjs"? 將會強(qiáng)制使用 CommonJS 模塊。

{
  "type": "module"
}

除此之外，文件還可以通過使用 ?.mjs? 或 ?.cjs? 擴(kuò)展名來設(shè)置模塊類型。 ?.mjs? 將它們強(qiáng)制置為 ESM，?.cjs? 將它們強(qiáng)制置為 CommonJs。

在使用 text/javascript 或 application/javascript mime type 的 DataURI 中，也將使用 ESM。

除了模塊格式外，將模塊標(biāo)記為 ESM 還會影響解析邏輯，操作邏輯和模塊中的可用符號。

導(dǎo)入模塊在 ESM 中更為嚴(yán)格，導(dǎo)入相對路徑的模塊必須包含文件名和文件擴(kuò)展名（例如 *.js 或者 *.mjs），除非你設(shè)置了 fullySpecified=false。

non-ESM 僅能導(dǎo)入 default 導(dǎo)出的模塊，不支持命名導(dǎo)出的模塊。

CommonJs 語法不可用: ?require?, ?module?, ?exports?, ?__filename?, ?__dirname?.

Further Reading

• ECMAScript Modules in Node.js