Import Maps：浏览器模块映射与部署策略

--- title: "Import Maps：浏览器模块映射与部署策略" keywords: - Import Maps - ES Modules - 浏览器模块 - 映射与范围 - Polyfill description: "介绍 Import Maps 的基本语法与作用域、与原生 ES Modules 的协作、部署与兼容回退策略，并给出可运行示例与权威参考。" categories: - 文章资讯 - 编程技术 --- 概述 Import Maps 允许在浏览器端为模块导入提供映射表，将 bare specifiers 指向具体 URL，避免打包阶段的重写，支持按作用域覆写。适用于轻量前端项目或渐进迁移，需结合兼容策略以覆盖不支持的浏览器。 机制与用法 HTML 示例 ```html ``` 工程建议 - 作用域与组织：对不同路径使用 `scopes` 局部映射，避免全局污染与版本冲突。 - 兼容与回退：不支持的浏览器通过 Polyfill 或构建产物回退；在构建管线保留替代方案。 - 安全与可控：受信任来源与子资源完整性（`integrity`）搭配使用，避免 CDN 污染风险。 - 监控：记录模块加载失败与时延，必要时回退到本地镜像。 参考与验证 - WICG Import Maps 规范：https://wicg.github.io/import-maps/ - MDN Import maps 文档：https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap - web.dev Import Maps 指南：https://web.dev/articles/import-maps - Chrome 平台文档：https://developer.chrome.com/docs/web-platform/import-maps/