在浏览器中运行 javascript es modules 的核心做法是引入带有 type="module" 属性的 <script></script> 标签，并依赖 http 服务器提供正确的 mime 类型。浏览器会按照模块声明自动处理依赖解析与加载顺序，无需打包工具即可直接执行。
如何编写一个可运行的入口文件
创建一个名为 main.js 的文件作为入口，在其中使用 import 语句引入其他逻辑，并通过 export 暴露功能。浏览器将把该文件视为顶级模块，按图所示的依赖关系进行加载。
// main.js
import { greet } from './utils.js';
console.log(greet('Browser'));
// utils.js
export function greet(name) {
return `Hello, ${name}!`;
}
在 HTML 中通过以下代码触发执行：
<script type="module" src="./main.js"></script>
预期输出为：Hello, Browser!。由于使用了 type="module"，脚本会自动延迟执行（defer），确保 DOM 已就绪。
如何处理跨域请求限制
ES Modules 默认遵循同源策略，若从不同域名加载资源会触发 CORS 错误。解决方法是在服务器端配置响应头 Access-Control-Allow-Origin，允许当前页面所在域访问模块文件。
// Node.js 示例：设置 CORS 头
const http = require('http');
const fs = require('fs');
http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Content-Type', 'application/javascript');
fs.readFile('.' + req.url, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Not Found');
} else {
res.writeHead(200);
res.end(data);
}
});
}).listen(3000);
当浏览器发起对 http://other-domain.com/utils.js 的请求时，服务器必须返回包含上述头的响应，否则模块加载将失败。
模块中的顶层 await 支持情况如何
现代浏览器已支持在 ES Module 中使用 await 关键字，即使不在函数内部。这使得模块可以在加载阶段直接异步获取数据或初始化状态，而无需包裹在 IIFE 中。
// async-main.js
const response = await fetch('/api/data.json');
const data = await response.json();
console.log(data);
该特性要求浏览器版本较新（Chrome 78+、Firefox 69+、Safari 11.1+）。在支持的环境中，顶层 await 会暂停模块的执行，直到 Promise 解决，随后再执行后续代码。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
