规范ES Modules导入顺序的核心是约定+工具约束,按依赖层级分组:第三方库→内置库→项目抽象层→同级/父级业务模块→当前子模块;同一层按字母序或语义优先级排序,空行分隔,统一使用清晰相对路径。

团队中规范 ES Modules 的导入顺序,核心不是语法强制,而是通过约定 + 工具约束来保障可读性、可维护性和依赖清晰性。ESM 本身不规定 import 的书写顺序,但混乱的导入容易掩盖依赖关系、引发命名冲突、增加重构成本。
按依赖层级分组:从远到近
把 import 按模块“距离”由外向内排列,体现代码的依赖流向:
- 第三方库(如 React、lodash)——最上层,不依赖项目内任何代码
- 内置/标准库(Node.js 中的 fs/path,浏览器中暂无等价物,可略)
- 项目内抽象层(utils、constants、types、config 等通用基础模块)
- 同级或父级业务模块(如 components/ 或 features/ 下的相邻模块)
- 当前模块的子模块(如 ./hooks、./services 子目录)
同一层级内按字母序或语义优先级排序
避免随意换行和跳序,提升扫描效率:
- 命名导出建议按变量/函数名首字母升序,例如:
import { debounce, throttle, once } from 'lodash' - 默认导入也适用,比如:
import ApiClient from './api/client'; import AuthStore from './store/auth';→ 按文件路径字母序更易定位 - 若存在明显主次(如一个入口模块明显主导其他),可将主模块置顶,其余按字母排,不必强求绝对字典序
用空行分隔逻辑区块,禁止单行混写
每个 import 区块职责明确,禁止跨类型挤在一行:
- ✅ 正确示例:
import React from 'react';
import { useState, useEffect } from 'react';
import { apiGetUser } from '@/api/user';
import { formatDate } from '@/utils/date';
import Header from './Header';
import UserCard from './UserCard';- ❌ 错误示例:把 React 和本地组件写在同一行、或跨空行缺失、或第三方与 utils 混在一起无分隔
统一使用相对路径,禁用深层嵌套别名(除非全团队配置了路径映射)
路径清晰 = 依赖可见,减少歧义:
- 推荐
import Button from '../../components/Button'而非import Button from '@components/Button'(除非已通过 vite/tsconfig.json 配置了baseUrl + paths且全员生效) - 所有相对路径以
./开头,禁用无前缀的someModule(会被识别为包名,易出错) - 避免
../../../超过两级,此时应考虑调整目录结构或提取公共模块
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











