javascript模块化如何实现_如何使用ES6模块导入导出【教程】

ES6模块依赖运行环境支持:浏览器需script加type="module",Node.js需package.json设"type":"module"或用.mjs后缀;import在HTML中报错因默认按传统脚本执行;export分命名导出(import{a})和默认导出(import a),不可混用;Node.js中须统一模块系统,动态import()可在CommonJS中安全使用,且路径须带扩展名。

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

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

浏览器默认把 当作传统脚本执行,不

启用模块解析。必须显式声明:

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

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' 是 ES2025+ 才支持)
  • 一个文件最多一个 export default,但可有多个命名导出

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

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

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

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