JavaScript模块通过export导出、import导入,支持命名导出/导入和默认导出/导入,可重命名、批量转发;路径需带扩展名或./开头,浏览器需type="module",Node.js需配置"type":"module"或.mjs后缀。

JavaScript模块通过 export 导出,用 import 导入其他模块。ES6 模块是静态语法,必须写在文件顶层,不能放在条件语句或函数里。
如何导出(export)
导出分两种:命名导出和默认导出,可混用但推荐保持简洁。
-
命名导出:一个文件可多次使用
export,导出变量、函数、类等,导入时需用对应名称
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
-
默认导出:每个模块最多一个
export default,导入时名字可自定,适合导出主功能
export default function debounce(fn, delay) { ... }
-
重命名导出 / 批量导出:可用
as改名,或用export { ... } from 'path'转发
export { default as debounce } from './utils.js';
如何导入(import)
导入也分命名导入和默认导入,路径必须带扩展名(如 .js)或为相对/绝对路径,不能省略 ./ 开头。
-
导入命名导出:用大括号,名字必须与导出一致(或用
as重命名)
import { add as sum } from './math.js';
- 导入默认导出:不加大括号,名字可任意取
import myDebounce from './utils.js'; // 也可以
- 混合导入:默认 + 命名,顺序不限,但默认必须在前(语法要求)
- 只执行模块(无导入):适用于仅需副作用的脚本(如 polyfill)
常见注意事项
- 模块路径是相对于当前文件的,不是 HTML 页面或终端路径
-
浏览器中使用模块需加
type="module": - Node.js 中启用模块需设置
"type": "module"在package.json,或用.mjs后缀 - 动态导入用
import()函数,返回 Promise,适合按需加载
const { renderChart } = await import('./charts.js');
renderChart();
}); 基本上就这些。导出和导入搭配得当,就能组织好代码结构,避免全局污染,也方便复用和测试。










