ES6模块需script标签加type="module"才生效,否则import报错;模块默认defer;export default与具名导出可共存但不能多个default;import()支持动态路径和await;路径必须带扩展名或相对/绝对前缀。

ES6模块必须用 type="module" 才能生效
浏览器里直接写 import 和 export 会报错,不是语法错了,而是模块系统根本没启动。关键在 HTML 的 标签必须加 type="module" 属性,否则 JS 引擎按传统脚本模式执行,import 会被当成非法语句。
常见错误现象:Uncaught SyntaxError: Cannot use import statement outside a module —— 就是这个原因。
-
是必须的,哪怕只有一行import - 不支持
这种内联写法(Chrome 127+ 开始支持,但兼容性差,别依赖) - 模块脚本默认是
defer行为:不会阻塞 HTML 解析,且按顺序执行
export 有两种写法,但 export default 和具名导出不能混用在同一个文件里
一个模块可以有多个 export,但只能有一个 export default。它本质是导出一个“默认值”,名字由导入方自定;而具名导出(export const x = 1 或 export {x})必须用原名或重命名导入。
容易踩的坑:
立即学习“Java免费学习笔记(深入)”;
- 写了
export default function foo(){},又写export const bar = 2—— 合法,没问题 - 写了
export default function foo(){},又写export default class A{}—— 报错,重复默认导出 - 导入时写
import utils from './utils.js',但源文件只有export const log = console.log(无 default)—— 报错:utils是undefined
/* utils.js */
export const log = console.log;
export function delay(ms) {
return new Promise(r => setTimeout(r, ms));
}
export default function greet(name) {
return `Hello, ${name}`;
}/* main.js */
import greet, { log, delay } from './utils.js'; // greet 来自 default,log/delay 来自具名导出动态 import() 是函数调用,支持表达式和条件加载,但返回 Promise
静态 import 必须在顶层、字面量路径、不能拼接字符串;而 import() 是运行时函数,路径可以是变量、可放在 if 里、甚至能用 await 等待。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
典型使用场景:路由按需加载、大组件懒加载、插件条件加载。
-
import('./math.js').then(m => m.add(1,2))—— 必须处理 Promise -
const path = env === 'prod' ? './prod.js' : './dev.js'; const mod = await import(path);—— 路径可计算 - 不能写
import() { ... }或import('./a.js').add(1,2)——import()返回的是模块命名空间对象,不是导出的函数本身 - Webpack/Vite 会把
import()当作代码分割点,生成独立 chunk;纯浏览器环境也支持(Chrome 63+,Firefox 67+)
模块路径必须带扩展名或以 /、./、../ 开头,不能省略
ES6 模块规范强制要求路径是“有效模块说明符”(valid module specifier),浏览器不接受裸名如 import {foo} from 'lodash' —— 会直接 404,因为没有协议也没有相对/绝对前缀。
这意味着你没法像 Node.js 那样靠 node_modules 自动解析,也不能靠打包工具“假装”支持裸导入(那是构建时行为,非运行时)。
- ✅ 正确:
import {foo} from './lib/foo.js'(带.js) - ✅ 正确:
import {bar} from '/node_modules/lodash-es/index.js'(绝对路径 + .js) - ❌ 错误:
import {baz} from 'lodash'(裸包名,浏览器不认识) - ❌ 错误:
import {qux} from 'utils'(没扩展名也没前缀,解析失败)
如果真要支持裸导入,得靠构建工具(如 Vite 的 resolve.alias)或服务器配置(如用 import-map),但这属于工程层补丁,不是语言原生能力。









