javascript 模块系统仅导出显式声明的成员，内部未导出的函数仍保留在当前模块作用域内；当默认导出的函数执行时，会自然访问同文件定义的私有函数，无需额外导出或导入。
javascript 模块系统仅导出显式声明的成员，内部未导出的函数仍保留在当前模块作用域内；当默认导出的函数执行时，会自然访问同文件定义的私有函数，无需额外导出或导入。
在 React（及标准 JavaScript 模块环境）中，export default 仅暴露你明确指定的函数、组件或值，不会自动“打包”其内部调用的其他函数。这些被调用的函数只要在同一模块（即同一 .js 文件）中声明，就天然处于该模块的闭包作用域中——它们是模块的私有实现细节，无需导出，也不会污染外部命名空间。
例如，以下 utils.js 文件定义了一个默认导出的 React 组件，它内部调用了一个仅用于格式化的私有函数：
// utils.js
function formatDate(date) {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
export default function UserProfile({ user }) {
return (
<div>
<h2>{user.name}</h2>
<p>Joined: {formatDate(user.joinDate)}</p>
</div>
);
}
在 App.js 中只需导入并使用默认导出即可：
// App.js
import UserProfile from './utils.js';
function App() {
return <userprofile user="{{" name: joindate:></userprofile>;
}
✅ 关键点解析：
- formatDate 未被 export，因此 无法从 App.js 或其他文件直接调用（如 import { formatDate } from './utils' 会报错）；
- 但 UserProfile 在运行时能正常调用 formatDate，因为二者共享同一模块的词法作用域（lexical scope），这是 JavaScript 执行机制的自然行为，与模块系统无关；
- import 语句只负责将目标模块的已导出绑定（binding） 引入当前作用域，不涉及“递归加载依赖函数”。
⚠️ 注意事项：
- 不要误以为“导出函数 = 导出它的全部调用链”，模块边界由 export/import 显式划定，而非运行时调用关系；
- 若需跨文件复用 formatDate，必须显式导出（如 export { formatDate } 或 export default formatDate），并在使用处对应导入；
- 这种封装方式有助于提升可维护性：内部函数可自由重构，只要默认导出的接口不变，调用方完全无感知。
简言之：模块导出的是“门面”，不是“整栋楼”；门面背后的所有逻辑，只要定义在同一文件中，就自动可用——这正是 JavaScript 作用域与 ES 模块协同工作的优雅之处。
