html怎么转esm模块化_HTML如何通过原生ES模块组织代码-html教程-PHP中文网

在HTML中使用ES模块需添加type="module"属性，浏览器将按ESM规则解析：自动严格模式、支持import/export、作用域隔离，默认defer；注意路径必须为HTTP(S)协议、带扩展名、不可省略，且需处理CORS与旧脚本迁移问题。

HTML里怎么用<script type="module">加载JS</script>

直接写 <script type="module"></script> 就行，浏览器会按esm规则解析：自动启用严格模式、支持 import/export、模块作用域隔离。注意它默认是 defer 行为——不阻塞解析，但会保持执行顺序。

常见错误现象：Uncaught SyntaxError: Cannot use import statement outside a module，说明你写了 import 却没加 type="module"；或者用了 <script></script> 标签但路径是相对 URL（如 ./utils.js），而没配服务器或本地双击打开——这时会触发 CORS 错误，因为模块脚本必须通过 HTTP(S) 加载。

必须用完整路径或相对路径（./ 或 ../ 开头），不能省略扩展名（import './main.js' ✅，import './main' ❌）
模块脚本无法读取 document.currentScript，别依赖这个
如果用本地文件协议（file://），Chrome/Firefox 会拒绝加载模块脚本，得启个最小 HTTP 服务（比如 npx serve 或 python3 -m http.server）

如何从传统 script 迁移到 ESM 不炸锅

老项目里一堆 <script src="a.js"></script><script src="b.js"></script>，直接改成 type="module" 会出问题：模块脚本不会共享全局变量，a.js 里声明的 window.foo = 1，b.js 拿不到。

正确迁移路径是「逐步封装」：先把可拆分的逻辑抽成 .js 文件并用 export 暴露，再在入口模块里 import。别试图让 ESM 和 IIFE 脚本混用全局变量。

已有代码不想大改？可以用 export * from './legacy-bundle.js' 把旧脚本包一层（前提是它本身不依赖 window 全局状态）
import 的路径必须是静态字符串，不能拼接变量（import('./' + name + '.js') 是动态导入，返回 Promise，不是静态语法）
第三方库如果没发 ES 模块版（只有 umd 或 iife），得用构建工具转译，或找它的 exports 字段支持的 ESM 入口（比如 lodash-es）

HTML中动态 import() 怎么用才安全

import() 是函数调用，返回 Promise，适合做条件加载、路由懒加载、按需功能注入。但它不是“让 HTML 变成模块”的开关，只是 JS 层的异步加载能力。

典型误用：<script>import('./app.js').then(...)</script> 写在非 module 脚本里——会报错，因为 import() 只能在模块上下文（type="module" 或另一个 import() 加载的模块）中使用。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

必须确保调用 import() 的脚本本身是模块（即父级 <script type="module"></script>）
路径支持表达式，但不能含非法字符或运行时不可控变量（比如用户输入直接拼进路径）
错误捕获要显式写 .catch()，否则失败会静默，控制台只报 Uncaught (in promise)
注意缓存：import('./foo.js?v=1') 和 import('./foo.js?v=2') 被视为不同模块，可能重复执行

为什么 import.meta.url 在 HTML 中特别有用

在模块脚本里，import.meta.url 返回当前模块的完整 URL（比如 https://site.com/js/main.js），这是唯一可靠获取“当前 JS 文件所在位置”的方式。比 document.currentScript.src 稳定，也比硬编码路径灵活。

典型场景：模块需要加载同目录下的 JSON 配置、图片或 Web Worker，就得靠它生成绝对路径。

构造同目录资源路径：const conf = await fetch(new URL('./config.json', import.meta.url)).then(r => r.json())
启动 Worker：new Worker(new URL('./worker.js', import.meta.url))
注意：import.meta.url 只在模块内有效，普通 <script></script> 里是 undefined
构建工具（如 Vite、Webpack）会处理它，但原生环境里它就是浏览器原生行为，无需 polyfill

模块路径解析规则和浏览器版本强相关，Edge 16+、Chrome 61+、Firefox 60+ 才完整支持。开发时别只看最新 Chrome，CI 或企业环境可能卡在旧版。最易被忽略的是：模块脚本的 crossorigin 属性——如果从其他域名加载模块，又想看详细报错堆栈，必须加 crossorigin="anonymous"，否则错误信息会被截断。