我應該如何組織我的應用程序？

我目前正在研究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

我應該如何組織我的應用程序？

回答

相關問題