在html中直接引入含import语句的javascript文件时，浏览器会报“uncaught syntaxerror: cannot use import statement outside a module”，根本原因是脚本未以模块模式执行；只需将script标签声明为type="module"即可解决。
在html中直接引入含import语句的javascript文件时，浏览器会报“uncaught syntaxerror: cannot use import statement outside a module”，根本原因是脚本未以模块模式执行；只需将script标签声明为type="module"即可解决。
当你在scripts.js中使用 import confetti from "https://esm.run/canvas-confetti@1"; 这类ES模块语法时，浏览器默认将.js文件视为传统脚本（script），不支持顶层import/export。即使你本地运行或通过file://协议打开HTML，只要未显式启用模块上下文，该错误就必然发生。
✅ 正确做法是：在HTML中引入脚本时，必须添加 type="module" 属性：
<script type="module" src="scripts.js"></script>
⚠️ 注意事项：
- type="module" 启用严格的ES模块环境：自动启用严格模式、支持顶层await、import/export，且模块脚本默认延迟执行（等价于 defer），无需手动处理加载时机；
- 模块脚本具有CORS限制：若通过file://协议本地双击打开HTML，浏览器会因跨源策略拒绝加载远程ESM（如 https://esm.run/...），此时控制台还会报 "Cross origin requests are only supported for HTTP."。务必使用本地HTTP服务（如 VS Code Live Server、npx serve 或 python3 -m http.server）启动页面；
- 不要混用模块与非模块脚本依赖：例如，不能在普通<script>中调用模块内定义的变量——模块作用域完全隔离；</script>
- 无需重命名文件为.mjs，也不需package.json或Node.js环境——浏览器原生支持type="module"。
? 补充建议（提升健壮性）：
- 使用<script type="module">内联写法可避免额外请求（适合简单逻辑）：<pre class="brush:php;toolbar:false;"><script type="module"> import confetti from 'https://esm.run/canvas-confetti@1'; document.getElementById('dot_left').onclick = () => confetti({ particleCount: 150, angle: 45, origin: {x: 0, y: 0.5} }); </script>
- 生产环境推荐锁定版本并使用CDN（如 https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/+esm），避免esm.run这类代理服务的可用性风险。
总结：import报错不是代码错误，而是执行环境配置缺失。一句 <script type="module" src="..."> 即可激活现代JavaScript模块能力——这是前端工程化落地最基础也最关键的一步。</script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
