ES Module

约 518 字大约 2 分钟

2026-02-27

ECMA 在参考了众多模块化规范后，在 2015 年，在 ES6 中发布的官方的模块化标准，也就是 ES Module。ESM 使用依赖预声明的方式导入和导出模块

在 HTML 中使用模块化方式引入 JavaScript 文件时，需要在 <script> 标签中添加 type="module" 属性，来告诉浏览器这是一个模块化的 JavaScript 文件

 <script type="module" src="entryFile"></script>

基本导入与导出

基本导出 可以有多个，但每个必须有名称。导出一个模块使用关键字 export

写法 1

export 声明语句

写法 2

export {
  具名符号
}

基本导入使用关键字 import，导入必须具有名称，因此要求导出的内容必须是声明表达式或具名符号

基本导入

import {} form "模块路径"

别名导入

import { a as b } from "模块路径"

* 导入

import * as customModule from "模块路径"

重要

ES6 的模块化属于预声明，这也就意味着，import 关键字不管声明在文件中的何处，在浏览器处理时，都会将其 "提升到顶部"。且是静态的，这也是 Tree Shaking 的前提条件

console.log(foo)  // 依然可以正常被输出
import { foo } from "./foo.js"

每个模块，除了允许存在多个默认导出之外，还允许存在一个默认导出，语法为：

常规写法

export default 导出的数据

不常见写法

export { 导出的数据 as default }

笔记

由于每个模块只有一个默认导出，因此每个模块不能出现多个默认导出语句

默认导如依然是使用 import 关键字，但默认导入无需再使用对象的方式获取导出项

import 变量名 from "模块路径"