ES Module Shims 官宣支持浏览器 TypeScript/JSON/CSS 热更新?

moboyou 2025-06-15 19:10 50 浏览

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

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

css样式引入

上一篇：css入门
下一篇：学前端怎能不知css系列-css初识

ES Module Shims 官宣支持浏览器 TypeScript/JSON/CSS 热更新?

1.ES Module Shims 用于提升基准

2. 支持零配置 TypeScript

3. 支持全面热更新

4. 支持全新的 Import Defer 提案

参考资料

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解