Marico's space

最近整理了很多项目，发现不同的team代码组织风格迥异，第一感觉就是项目的目录结构。本人结合各个项目组的不同需求和命名特点， 总结了此结构，为同行师兄弟们初建react项目参考。

|- public    // index.html 以及一些静态文件
|- scripts    // 存放build，deploy以及其他相关脚本
|- dist | build    // build后文件存放目录,通常加入.gitignore
|- coverage    // UT报告存放目录，,通常加入.gitignore
|- src    // 代码主目录
    |- __mocks__    // 存放mock数据用以调试以及UT
    |- assets    // 资源文件， 包含style sheet，images，fonts，etc
    |- components    // 存放项目组件，通常又细分为common目录各个page目录
        |- ComponentA    // ComponentA
            |- tests  // 存放UTs
            |- ComponentA.tsx // 组件主文件
            |- index.ts 
        ...
    |- constants    // 存放常量
    |- contexts    // 存放contexts
    |- hooks    // 存放hooks
    |- routes    // 存放路由配置
    |- services    // 通常存放httpClient，api call相关文件
    |- types    // 存放类型定义
    |- utils    //  存放工具函数，通常是纯函数
    |- views | pages    // 存放页面文件
    |- App.ts | main.ts
    ...
|- .env
|- .env.development
|- .env.production
...
|- .eslintrc
|- .prettierrc
|- package.json
|- tsconfig.json
|- README.md
...

目录根据项目技术选型和业务需求会有不同组织方式，比如Lerna项目。

总之，无论如何，合理的目录结构，优秀的文件拆分，优秀的代码解耦，高可测试的代码组织，会给项目的可维护性和稳定性，避免形成屎山，带来积极效果。