React项目组件组织需按字母顺序？重命名文件夹引发问题求助

这问题我太熟了！之前帮团队排查过ARc框架的类似坑，你的现象完全合理，核心是ARc的约定逻辑和Webpack的目录遍历顺序在搞事情，咱们一步步说清楚：

1. 为什么重命名atoms→primitives、molecules→widgets会崩溃？ #

ARc（Atomic React）框架的核心是靠约定式的组件加载顺序工作的：基础组件（原atoms）必须在依赖它们的复合组件（原molecules）、组织级组件（organisms）之前被加载。

原目录结构atoms（a开头）→molecules（m开头）→organisms（o开头）→pages（p开头）刚好符合Webpack默认的ASCII字典序（字母a到z排序），所以基础组件会被优先处理，后续依赖它们的组件加载时不会找不到。

但你改成primitives（p开头）和widgets（w开头）后，organisms（o开头）的字典序比p、w都靠前！Webpack会先处理organisms里的组件，而这些组件大概率依赖widgets，widgets又依赖primitives——这时候基础组件还没被加载，自然会抛出“组件未找到”的错误，导致项目崩溃。

2. 为什么加下划线_primitives、_widgets就正常？ #

这是Webpack的目录排序规则决定的：在ASCII码里，下划线_的数值是95，比所有小写字母（a是97）都小。所以下划线开头的目录会排在所有字母开头的目录最前面，加载顺序就变成了：

• _primitives（基础组件）→ _widgets（复合组件）→ organisms → pages → 业务模块目录
  完美符合ARc要求的依赖加载顺序，所以项目就能正常运行了。

3. Atomic React是不是“仅靠目录排序”才生效？ #

倒也不是“仅靠”，但它的约定式架构严重依赖加载顺序。ARc设计的初衷是让开发者不用手动导入基础组件（或者内置了自动导入逻辑），所以必须保证基础组件先于依赖它们的组件被注册/加载。原原子设计的目录命名刚好利用了Webpack的默认排序，实现了这个需求。

给你的重构建议（按业务模块拆分） #

既然你想按accounts、checkout等业务模块拆分，同时避免加载顺序问题，可以试试这几个方案：

• 方案1：保留下划线前缀的基础组件目录
  把基础组件放在_primitives、_widgets里，然后在同级目录下创建业务模块目录（如accounts、checkout），每个业务模块里可以包含自己的organisms、pages，依赖基础组件时直接导入即可。这种方式最简单，完全兼容ARc的约定。
• 方案2：自定义Webpack排序规则
  修改Webpack配置，让primitives、widgets目录始终排在业务模块目录前面。不过这会增加配置复杂度，后续维护成本更高，不推荐新手用。
• 方案3：逐步改为手动导入组件
  慢慢脱离ARc的自动加载约定，所有组件都手动导入，这样就完全不依赖目录加载顺序了。适合重构阶段逐步推进，但需要修改大量组件的导入语句。

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