WHAT - script type=“module“

在 WHAT - script 加载（含 async、defer、preload 和 prefetch 区别） 中我们详细介绍过有关 script 加载的内容，其中提到 es module 加载。

<script type="module"> 是 HTML 中用来加载 JavaScript ES Module（ESM） 的一种方式。它与传统的 <script> 标签不同，具有模块化、作用域隔离、支持 import/export 等特性。

一、基本用法

<script type="module">import { sayHi } from './greetings.js';sayHi('world');
</script>

或者：

<script type="module" src="./main.js"></script>

二、核心特性详解

1. 支持 import / export

ES Module 语法天生支持模块化，使用 import 引入模块，export 导出内容。

// greetings.js
export function sayHi(name) {console.log(`Hi, ${name}!`);
}

// main.js
import { sayHi } from './greetings.js';
sayHi('ChatGPT');

2. 模块是默认严格模式（strict mode）

所有模块文件自动以 use strict 模式执行，不需要显式声明。

3. 模块代码是作用域隔离的

不像普通 <script>，模块不会污染全局变量：

<script>var foo = 123; // 全局变量
</script><script type="module">var foo = 456; // 局部模块作用域，互不影响
</script>

4. 模块只加载一次（即使被多次引用）

浏览器会缓存模块，不会重复执行。

// a.js
console.log('Module A loaded');
export const a = 1;

即使多次 import './a.js'，只执行一次。

5. 模块通过 CORS 加载

模块默认使用 CORS（跨源资源共享） 策略。跨域模块必须正确设置 Access-Control-Allow-Origin，否则加载失败。

6. 模块加载是异步的

模块在解析依赖后会异步加载，因此不会阻塞页面解析。

三、与默认 script 不同点对比

特性	普通 <script>	<script type="module">
是否支持模块系统	❌ 不支持	✅ 支持
是否默认严格模式	❌ 否	✅ 是
是否作用域隔离	❌ 共享全局作用域	✅ 独立作用域
是否可使用 import/export	❌ 否	✅ 是
是否异步加载	❌ 阻塞（可加 defer/async)	✅ 天生异步加载
是否重复执行	✅ 每次 <script> 执行	✅ 只执行一次，后续复用

四、模块加载方式

1. 本地模块

<script type="module" src="./main.js"></script>

注意路径需要以 ./ 或 / 开头，不能省略（不能直接写 main.js）。

2. CDN 方式

<script type="module">import _ from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js';console.log(_.shuffle([1, 2, 3, 4]));
</script>

五、注意事项

1. 模块必须部署在支持 ESM 的环境（现代浏览器）。
2. 文件必须是 .js 或 .mjs，不能用 CommonJS 风格（如 require()）。
3. 若项目设置为 "type": "module"，Node.js 中也可以使用 ESM，但语法和兼容性需注意。

六、浏览器支持

所有现代浏览器均已支持 ES Modules：

• ✅ Chrome 61+
• ✅ Firefox 60+
• ✅ Safari 10.1+
• ✅ Edge 16+
• ✅ Node.js 12+（需设置 "type": "module" 或使用 .mjs）