JavaScript模块化核心是ES6的import/export语法,支持命名导出、默认导出及混合导入,需静态声明、顶层作用域,浏览器用type="module",Node.js需"type":"module"或.mjs后缀。
JavaScript 中实现模块化开发,核心是用 ES6 的
和
语法,它原生支持静态分析、编译时检查,且被现代
浏览器
和 Node.
js
(v14.13+ 默认启用)广泛支持。
ES6 模块的基本导出方式
一个模块文件(如
)可以按需导出变量、函数、类:
命名导出(named export)
:可导出多个,导入时必须用对应名称(或重命名)
// math.js
export
const
PI = 3.14159;
export
function
add(a, b) {
return
a + b; }
export
class
Calculator { ... }
默认导出(default export)
:每个模块最多一个,导入时可自定义任意名字
// utils.js
export
default
function
debounce(fn, delay) { ... }
ES6 模块的导入方式
在另一个文件中用
加载模块,路径必须带扩展名(如
)或为相对/绝对路径:
导入命名导出:用大括号
,支持解构式重命名
// main.js
import
{ PI, add }
from
'./math.js'
;
import
{ add
as
sum }
from
'./math.js'
;
导入默认导出:不加花括号,名字随意
import
debounce
from
'./utils.js'
;
import
myDebounce
from
'./utils.js'
;
Comet AI 浏览器
下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
混合导入:同时引入默认 + 命名导出
import
debounce, { PI, add }
from
'./utils.js'
;
立即学习
“
Java免费学习笔记(深入)
”;
只执行模块(不导入任何值):用于副作用,如初始化、打补丁
import
'./polyfill.js'
;
注意事项和
常见问题
ES6 模块是静态的、顶层作用域的,不能写在条件语句或函数里:
❌ 不合法;要用动态
(返回 Promise)
必须在顶层,不能在 if 或函数内
模块自动启用严格模式,无需写
Node.js 中需将
加上
,或用
后缀
浏览器中使用
才能加载 ES 模块脚本
动态导入 import()
适合按需加载、条件加载或拆包场景:
async
function
loadChart() {
const
{ default: Chart } =
await
import
(
'./chart.js'
);
return
new
Chart(...);
}
基本上就这些。ES6 模块语法简洁清晰,配合构建工具(如 Vite、Webpack)或现代运行环境,已完全可替代 CommonJS 等旧方案。
importexportmath.jsimport.js{}if (...) { import ... }import()export"use strict"package.json"type": "module".mjs