项目中如何使用index.js？按目录创建index.js是良好开发实践吗

1. index.js的核心作用 #

你说的统一导出、简化导入语句确实是index.js最常用的核心作用之一，这个能力来自ES模块、CommonJS等规范的默认约定：当你导入一个目录路径时，运行环境会自动查找该目录下的index.js作为入口文件加载。

除此之外它还有一个很重要的作用是做模块封装：你可以只在index.js里导出允许外部访问的内容，目录内部的辅助函数、临时组件等不用对外暴露，隐藏实现细节。
举个和你项目结构匹配的例子，在/app/components/Buttons目录下新增index.js，内容如下：

export { default as Button } from './Button.js';
export { default as CircleButton } from './CircleButton.js';

原来的导入写法是：

import Button from '/app/components/Buttons/Button.js';
import CircleButton from '/app/components/Buttons/CircleButton.js';

加了index.js之后可以直接简化为：

import { Button, CircleButton } from '/app/components/Buttons';

嵌套层级越深，这种简化的效果越明显。

2. 每个目录单独加index.js是否属于良好实践 #

这个没有绝对的标准答案，要结合目录的使用场景判断，我们可以先明确它的优劣势再做选择：

优势 #

• 大幅简化高频引用模块的导入语句，开发体验提升明显
• 降低重构成本：只要index.js的导出接口不变，你调整目录内部的文件结构、重命名内部文件都不会影响外部的引用逻辑
• 可以统一做公共逻辑处理：比如在utils、services目录的index.js里统一做参数校验、环境兼容处理，不用在每个子文件里重复实现

劣势 #

• 对于只有1-2个文件、几乎不会被外部引用的小目录，新增index.js属于冗余文件，反而会增加项目维护成本
• 如果写了大量复杂的重命名导出、条件导出逻辑，会提高排查问题的成本，开发者很难直接定位到模块的实际定义位置
• 无脑使用export *全量导出可能会影响构建工具的tree shaking效果，导致未使用的代码被打包进产包，需要额外做配置优化

通用建议 #

• 对外提供公共能力的目录，比如你项目里的components、utils、services、theme这类会被全局频繁引用的目录，非常适合加index.js做统一导出
• 业务场景专属的内部目录，比如某个screen下仅自身使用的私有组件目录，就没必要额外加index.js
• 导出时尽量明确列出要对外暴露的模块，不要默认全量导出，避免引入冗余内容

内容的提问来源于stack exchange，提问作者Raul