ES6模块通过export/import实现静态依赖管理。支持命名导出、批量命名导出和默认导出;import需在顶层,路径为字符串字面量,支持重命名、默认导入及仅执行导入;模块单例缓存,路径相同则共享实例。

ES6模块系统用 export 和 import 实现静态、明确的代码组织方式,不依赖全局变量或脚本加载顺序,本质是编译时确定依赖关系。
导出(export)有三种常见写法
可以导出变量、函数、类,甚至默认导出一个值:
-
命名导出:每个导出项必须有名字,可导出多个,接收时需用同名解构
export const PI = 3.14;
export function add(a, b) { return a + b; } -
批量命名导出:用大括号集中导出已有声明
const name = "Alice";
function greet() { return `Hi, ${name}`; }
export { name, greet }; -
默认导出:每个模块最多一个,接收时不需大括号,名字可自定
export default function() { return "default action"; }
导入(import)要匹配导出类型
导入语句必须在顶层(不能在 if 或函数内),且路径必须是字符串字面量:
- 导入命名导出:用大括号,名字必须和导出一致(可用 as 重命名)
import { PI, add } from "./math.js";
import { add as sum } from "./math.js"; - 导入默认导出:不用大括号,可任意起名
import myFunc from "./utils.js"; - 同时导入默认和命名:默认放前面,命名放大括号里
import main, { helper, VERSION } from "./module.js"; - 只执行模块不导入值(比如初始化逻辑):
import "./polyfill.js";
模块路径和文件后缀要注意
浏览器和 Node.js 对模块解析规则略有不同:
标签: javascript es6 java js node.js node 浏览器 工具 ai
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
还木有评论哦,快来抢沙发吧~