我应该如何组织我的应用程序？

我目前正在研究React/TypeScript项目，并将我的文件分成几个文件夹。我的项目是解决数独交互，使用各种加工方法，所以我有我的应用程序分解成这种结构：我应该如何组织我的应用程序？

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/文件夹变得相当大。我想知道我应该按照什么方案来重新组织我的文件结构，知道这是一个单页面应用程序。任何帮助，将不胜感激。

来源

2017-05-03 iHowell

为什么'jquery'不在'node_modules'中？为什么'css'不在组件旁边？为什么基本上资产的'fonts'和'img'不在公共目录中？我也会先创建一个'ui'文件夹。不要叫'ts'文件夹。为什么不简单地调用它'src'或'source'？ – Sulthan

我的js文件夹容器bootstrap，jquery等，但我想npm可以处理这个。好点子！ – iHowell

如何确保组件旁边的CSS有帮助？整个应用程序是客户端，在'server /'文件夹中有一个用于数据访问的php脚本。 – iHowell

从您发布的内容，它读起来就像你component和container文件夹是平的 - 我不认为这是一个好主意 - 它会像你说的，导致相当长的文件夹。

我的个人项目之一有以下布局。在组件下，我拥有所有可重用的组件和组件。他们或多或少地任意嵌套 - 我将在模块，布局，表单等下面有一个“游戏”文件夹 - 只是为了帮助解决混乱问题。 “容器”（我理解他们），是根据“路线，”和他们的文件夹结构如下，他们是加载agains的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

这将有助于减少混乱。

来源

2017-05-03 16:16:32

好的，谢谢！另外，为了澄清，这只是跟随容器/组件布局，而不是与路由有关，所以容器只是保持组件的逻辑。我想，按照你所说的，我应该把它们合并起来，然后按层次结构（在页面上）将所有内容分解成新的文件夹。这也可能有所帮助。 – iHowell

是的 - 这只是我个人的风格，但我认为它运作良好。不要害怕嵌套文件夹 - 你可以轻松地折叠/隐藏文件夹。而且，就像我说的，我认为我的“路线”文件夹就像您的“容器”文件夹。路线中的所有东西都只是放置/放置高级组件（比如“在这里放置图片网格”）。 –

我建议把'actions'和'redurs'放入一个普通的超级文件夹，例如'state'。实际上，有些人更喜欢将动作和缩减器放在同一个文件夹中，名为'navigation.reducer.ts'和'navigation.actions.ts'。原因在于这些文件通常非常紧密地结合在一起，编辑时通常也在编辑第二个文件。 – Sulthan

我应该如何组织我的应用程序？

回答

相关问题