ES6模块怎么用？导入导出详细教程

ES6模块（import/export）并非通过配置“开启”，而是严格依赖运行环境的支持：浏览器需在script标签中声明type="module"，Node.js则必须通过package.json设置"type":"module"或使用.mjs后缀，否则直接报错；理解命名导出与默认导出的本质区别、避免混用、注意路径必须带扩展名、善用动态import()在CommonJS中安全加载，以及认清HTML中直接写import为何失败——这些关键细节正是掌握现代JavaScript模块化的核心门槛，帮你避开90%的常见陷阱。

ES6 模块（import/export）不是靠配置“开启”的，而是依赖运行环境是否支持——浏览器要加 type="module"，Node.js 要设 "type": "module" 或用 .mjs 后缀，否则直接报错 Cannot use import statement outside a module。

为什么 import 写在 HTML 里会报错？

浏览器默认把 当作传统脚本执行，不启用模块解析。必须显式声明：

• HTML 中写：
• 或内联：
• 注意：模块脚本自动启用严格模式、this 为 undefined、不共享全局作用域

export 有哪几种写法？区别在哪？

命名导出（export）和默认导出（export default）不能混用在同一个语句里，且导入语法必须匹配：

• export const a = 1; → 导入必须用 import { a } from './x.js'
• export default function() {} → 导入用 import fn from './x.js'（名字可任意）
• export * from './y.js' 只能重导出，不能加修饰（比如 export * as ns from './y.js' 是 ES2020+ 才支持）
• 一个文件最多一个 export default，但可有多个命名导出

Node.js 里用 import 报错怎么办？

Node.js 默认按 CommonJS 解析 .js 文件。解决方式只有两个有效路径：

• 在 package.json 加字段："type": "module"（整个包走 ES 模块）
• 或把文件改名成 index.mjs（优先级高于 package.json 的 type）
• 不要试图在 .js 文件里混用 require() 和 import —— 语法层就不允许
• 动态 import() 是函数，返回 Promise，可在 CommonJS 中安全使用：const m = await import('./foo.js')

模块路径必须带扩展名（./utils.js）或斜杠（./utils/），Node.js 不像 Webpack 那样自动补 .js；浏览器也一样，import './utils' 会 404。

理论要掌握，实操不能落！以上关于《ES6模块怎么用？导入导出详细教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！