javascript模块如何导入导出_ES6模块系统怎样工作？-js教程-PHP中文网

javascript模块如何导入导出_ES6模块系统怎样工作？

夜晨

发布： 2025-12-15 13:20:03

原创

107人浏览过

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

javascript模块如何导入导出_es6模块系统怎样工作？

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 对模块解析规则略有不同：

AOXO_CMS建站系统企业通用版1.0

一个功能强大、性能卓越的企业建站系统。使用静态网页技术大大减轻了服务器负担、加快网页的显示速度、提高搜索引擎推广效果。本系统的特点自定义模块多样化、速度快、占用服务器资源小、扩展性强，能方便快捷地建立您的企业展示平台。简便高效的管理操作从用户使用的角度考虑，对功能的操作方便性进行了设计改造。使用户管理的工作量减小。网站互动数据可导出Word文档，邮件同步发送功能可将互动信息推送到指定邮箱，加快企业