ES Module Shims 官宣支持浏览器 TypeScript/JSON/CSS 热更新?
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
ES Module Shims 在浏览器原生 ESM 支持的基础上，添加了导入映射（Import Map）和其他 ES 模块功能。目前，几乎所有主流浏览器都支持导入映射，而该 Shim 也能轻松绕过。对于剩余的 4% 用户，其基于高性能生产和 CSP 兼容的垫片开始重写由 WebAssembly ESM 词法分析器驱动的模块说明符。
在 2025 年 5 月 12 日 ES Module Shims 又官宣了新功能，即支持在兼容标准的浏览器中实现热更新。2.0 版本中的 CSS、JSON 和 TypeScript 模块导入功能默认开启，无需单独配置。此外，其还为最新的 TC39 提案 Import Defer 提供了全新的 polyfill。
1.ES Module Shims 用于提升基准
ES Module Shims 的核心功能之一是尝试在现代主流浏览器中不执行任何操作。其通过定义基准功能，然后对功能进行检测来实现。当所有基准功能都支持时，则无需对模块进行任何分析，因为浏览器本身已经支持。
ES Module Shims 2.5 已将 CSS 和 JSON 模块添加到其基准支持中。这两个功能的浏览器采用率分别达到 75% 和 85%，最终有望被纳入基准。
很多开发者都在使用原生 CSS 模块导入编写更多的 Web 应用程序，而能够包含来自模块脚本的样式实际上是一种非常优秀的模块化 CSS 开发体验：
<script type="module">
import sheet from 'https://site.com/sheet.css' with {type: 'css'};
document.adoptedStyleSheets.push(style);
//CSS 文件需要使用有效的 CSS 内容类型。
</script>
2. 支持零配置 TypeScript
在 ES Module Shims 2.5 中，TypeScript 默认启用，因此无需任何配置即可在浏览器中加载原生 TypeScript 应用，从而简化开发流程。
虽然并非正式的基准功能，因为导入 TypeScript 始终会引发中断（非语法问题，而是由 MIME 类型导致）。而现在，开发者可以像基准功能一样使用 TypeScript。
<script type="module" lang="ts">
import './dep.ts';
const ts: boolean = true;
console.log('TypeScript!');
</script>
// 或者
<script type="importmap">
{
"imports": {
"app": "/app.mts"
}
}
</script>
<script type="module" lang="ts">
import 'app';
</script>为了避免获取模块进行分析，TypeScript 会在顶级模块脚本中使用 lang="ts" 属性进行提示。当找到 TypeScript 时，其将动态加载 SWC 的 Amaro 类型剥离构建。现在，Shims 还会在浏览器控制台中输出一个警告，提示 TypeScript 正在被类型剥离，以帮助避免任何错误进入生产环境。
3. 支持全面热更新
Shim 和 Polyfill 模式现在均支持全面的热更新，允许选择性地重新加载模块，而无需重新刷新整个页面：
<script type="esms-options">
{
"hotReload": true
}
</script>启用热更新后，模块将使用 import.meta.hot 对象加载，并严格遵循 Vite 的热加载 API。要启动模块的热加载，开发者只需要调用 importShim.hotReload(url) API 即可。
当热加载需要重新实例化模块时，ES Module Shims 会在获取请求和模块注册表导入后附加 ?v=2 查询参数后缀。
基于重载 (Reload-based) 的热加载已自动启用，适用于所有模块类型，包括：CSS 模块导入、JSON 模块导入和 TypeScript。
以下是 2.0 版本中一个完整的端到端应用，开发者无需配置即可运行热加载，下面是 index.html 内容：
<!doctype html>
<!-- 从 CDN 加载 ES Module Shims -->
<script async src="https://ga.jspm.io/npm:es-module-shims@2.5.0/dist/es-module-shims.js"></script>
<!-- 启动热更新 -->
<script type="esms-options">
{
"hotReload": true,
"hotReloadInterval": 100
}
</script>
<!-- 设置 import map 的依赖 -->
<script type="importmap">
{
"imports": {
"vue": "https://ga.jspm.io/npm:vue@3.5.13/dist/vue.esm-browser.prod.js"
}
}
</script>
<!-- ES Module Shims 会自动查找该元素并接管逻辑 -->
<script type="module" lang="ts" src="app.ts"></script>
<div id="app"></div>接下来开发者可以使用标准 Vue 技术定义应用程序以支持热加载：
import {createApp} from 'vue';
import UserCard, {type User} from './user-card.ts';
let app;
export function initApp () {
app = createApp({
setup() {
const users: User[] = [
{name: 'Alice', age: 35},
{name:'Bob', age: 30}
];
return {users};
},
// 渲染模板
template: `<user-card v-for="user in users" :key="user.name" :user="user" />`
});
app.component('user-card', UserCard);
return app;
}
if (!import.meta.hot?.data?.loaded) {
app = initApp();
app.mount('#app');
}
// 启动热加载模式
if (import.meta.hot) {
import.meta.hot.data.loaded = true;
import.meta.hot.accept((newApp) => {
app.unmount();
app = newApp.initApp();
app.mount('#app');
});
}接着开发者还可以通过诸如 importShim.hotReload('./app.ts') 或 importShim.hotReload('./user-card.css') 之类的调用附加任何事件源来驱动变更请求。
4. 支持全新的 Import Defer 提案
Import Defer 提案填补了 CommonJS 模块的一个空白，即延迟模块初始化。在 Node.js 应用程序中，开发者可以将 require() 语句移到函数中以缩短应用启动时间：
// 没有懒加载的 CommonJS
const foo = require('foo');
module.exports = function bar() {
return foo();
}// CommonJS 中的懒加载
module.exports = function bar() {
const foo = require('foo');
return foo();
}在第二种写法中，如果开发者从未使用过 bar() 函数，那么永远不需要为导入 foo() 付出加载成本。但对于 ESM 模块来说，由于没有同步导入，所以很难实现同样的功能：
import foo from 'foo';
// foo 模块会经过以下流程
// 1. 构建 Module Record 和 Module Map
// 2. 模块系统构建 Module Environment Record（包括：父子模块链接、模块求值等）
export default function bar() {
return foo();
}关于上图逻辑可以查看我的另一篇文章《为什么说 ESM 模块少不了类型声明提升?》，而 import defer 就是为了这种场景而生的：
import defer * as fooDeferred from 'foo';
export default function bar() {
return fooDeferred.foo();
}
在上面示例中，fooDeferred 是一个新的延迟模块命名空间，其表示导入图谱 (Imported Graph) 的顶层链接来获取并解析所有依赖项，但不会进行顶层求值环节。
延迟命名空间 (fooDeferred.foo) 上的对象访问会导致顶层执行延迟，如果没有 top-level 的 await 语句，则可以将其同步封装在 bar() 函数内部，从而提升初始化性能。
参考资料
备注：本文灵感来自 Guy Bedford 发表的《Hot Reloading with ES Module Shims 2.5》，但是对部分内容添加了自己的理解。https://guybedford.com/hot-reloading-es-module-shims-2.5
https://github.com/guybedford/es-module-shims
https://mp.weixin.qq.com/s/NW6iLrGRz3W33n7GYSrM8A
https://github.com/tc39/proposal-import-sync
https://javascript.plainenglish.io/node-js-esm-npm-yarn-deep-dive-adda15dabce
