我应该如何组织我的申请？

Question

我目前正在开发一个React / TypeScript项目，并将我的文件分成几个文件夹。我的项目是使用各种处理方法以交互方式解决Sudoku，因此我将我的应用程序拆分为这个结构：

sudokusolver/
    css/
    dist/
    fonts/
    img/
    js/ -> external libraries, ie. jquery, etc.
    node_modules/
    server/ -> fetches puzzle data from the server
    ts/
        actions/ -> user actions stored for history navigation
        components/
        containers/
        enumerations/
        models/ -> stores multiple actions for history navigation
        solver/ -> sudoku solving methods
        index.tsx
    index.html
    package.json
    ...

现在，我的components/和containers/文件夹变得相当大。我想知道我应该遵循什么方案来重新组织我的文件结构，知道这是一个单页面应用程序。任何帮助将不胜感激。

Answer 1

根据您发布的内容，它看起来像您的component和container文件夹是平的 - 我认为这不是一个好主意 - 正如您所说，它会导致相当冗长的文件夹。

我的一个个人项目有以下布局。在组件下，我拥有所有可重用的组件和组件。它们或多或少是任意嵌套的 - 我会在模态，布局，形式等下面有一个“游戏”文件夹 - 只是为了帮助克服。 “容器”（我理解它们）位于“路径”下，它们的文件夹结构遵循它们再次加载的URL路径（/profile/games使用来自routes/profile/games/...的容器/包装器）

在我看来，它也有助于将与项目构建无关的所有内容（即除了webpack定义之外的所有内容，npm的package.json，gulpfiles，（babel / eslint / tslint）rc文件等）转换为子文件夹 - src或类似文件夹。

我还会分割您的服务器和客户端应用程序 - 它们不需要位于同一文件夹下。我经常做像

这样的事情

projectname/
    project_client/
        # client src
    project_server/
        # server src

它将有助于减少混乱。