Javascript的模块化是如何实现的_怎样使用Javascript的ES6模块语法？_技术教程

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}）必须用原名或重命名导入。

容易踩的坑：

写了 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+）