ES6模块化详解与JavaScript实战应用

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript模块化实现及ES6用法详解》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

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

ES6模块必须用 type="module" 才能生效

浏览器里直接写 import 和 export 会报错，不是语法错了，而是模块系统根本没启动。关键在 HTML 的 是必须的，哪怕只有一行 import

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

今天关于《ES6模块化详解与JavaScript实战应用》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！