Webpack ECMAScript 模塊

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

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

導出

關鍵字 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();

導入

關鍵字 import 允許從其他模塊獲取引用到 ESM 中:

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

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

import theDefaultValue from './module.js';
// 導入 `default` 導出的快捷方式

將模塊標記為 ESM

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

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

{
  "type": "module"
}

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

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

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

導入模塊在 ESM 中更為嚴格，導入相對路徑的模塊必須包含文件名和文件擴展名（例如 *.js 或者 *.mjs），除非你設置了 fullySpecified=false。

non-ESM 僅能導入 default 導出的模塊，不支持命名導出的模塊。

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

Further Reading

• ECMAScript Modules in Node.js