ECMAScript 模块

ECMAScript 模块 (ESM) 是一个用于在 Web 中使用模块的规范。它受所有现代浏览器支持，是为 Web 编写模块化代码的推荐方式。

Webpack 支持处理 ECMAScript 模块以优化它们。

导出

export 关键字允许将 ESM 中的内容暴露给其他模块

export const CONSTANT = 42;

export let variable = 42;
// only reading is exposed
// it's not possible to modify the variable from outside

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';
// import "bindings" to exports from another module
// these bindings are live. The values are not copied,
// instead accessing "variable" will get the current value
// in the imported module

import * as module from './module.js';
module.fun();
// import the "namespace object" which contains all exports

import theDefaultValue from './module.js';
// shortcut to import the "default" export

将模块标记为 ESM

默认情况下，webpack 会自动检测文件是 ESM 还是其他模块系统。

Node.js 建立了一种通过在 package.json 中使用属性来显式设置文件模块类型的方式。在 package.json 中设置 "type": "module" 会强制此 package.json 下的所有文件都为 ECMAScript 模块。设置 "type": "commonjs" 将强制它们为 CommonJS 模块。