快捷導(dǎo)航

Webpack?ECMAScript?模塊詳解

更新時間：2023年12月01日 14:29:21 作者：鋜斗

ECMAScript 模塊（ESM）是在 Web 中使用模塊的規(guī)范，所有現(xiàn)代瀏覽器均支持此功能，同時也是在 Web 中編寫模塊化代碼的推薦方式，這篇文章主要介紹了Webpack?ECMAScript?模塊,需要的朋友可以參考下

前言

標(biāo)題一

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 模塊。