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

模块路径必须带扩展名或以 `/`、`./`、`../` 开头，不能省略

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），但这属于工程层补丁，不是语言原生能力。

# javascript # es6 # java # html # js # node.js # node # vite # 浏览器 # 工具 # 懒加载 # ai

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】