ES6導入和node_modules地獄

Question

我正在學習反應並編寫自己的組件，但是我遇到了項目組織方面的問題。

這是我的樹

 Project_Folder
  - Components
    - Form
      - index.js
      - form.less
      - package.json
    - Button
      - index.js
      - button.less
      - package.json
  - node_modules
    - <million unknown packages>
  - application.js
  - webpack.conf.js

在我的application.js我導入如下形式的表格： import Form from './Components/form/index.js'; 最近，我想出是否可以將我的components文件夾放到node_modules文件夾中，我可以使用import Form from 'Components/Form';導入我的組件import Form from 'Components/Form'; 更好。 但是開發這個組件變得很麻煩，因為每當我進入node文件夾時，它就有數百萬個webpack或babel或mini-CSS-extractor所需的其他模塊。

在node_modules中是否有更好的組織解決方案，或者我應該在全球范圍內安裝開發工具？

Answer 1

絕對不應該將組件保留在node_modules目錄中，在該目錄中，僅保留應用程序的依賴項。 這對您可能是一本好書。 尤其是在使用git存儲庫時，不應在其中復制node_modules目錄，因為正如您所注意到的那樣-這很麻煩。 克隆存儲庫后，讓其他使用此代碼的人自己安裝依賴項。

約定很少-一種約定是將組件保留在src/目錄中。 我的建議是安裝全局create-react-app （用於React網站的樣板生成器， 可在此處獲得 ）並檢查其約定。 對您來說應該是一個很棒的課程。

讓我擔心的一件事是，為什么每個組件中都有package.json ？ 整個項目應該只有一個package.json文件。 在這里閱讀 。

如果您希望文件路徑更短並且更易於閱讀/使用，則可以使用Webpack 這樣創建別名。

Answer 2

將組件放在node_modules文件夾中不是一個好主意 。 除非您要通過其他工具/框架在團隊之間創建可共享的代碼。 使用您的組件會產生很多尚未遇到的問題：(！

即，Node模塊提供了僅使用package.json共享代碼的靈活性，而使用.gitignore忽略了它們。 並通過npm install重新安裝它們。

您能在這里看到問題嗎？

為了現在可以在node_modules內部共享組件 ，這些選項是：

• 要么在不丟失文件夾的情況下推送文件（ 畢竟不是一個選項 :(）
• 發送整個應用程序和可能龐大的模塊，並迫使每個人都必須下載大量的倉庫，甚至在上載到存儲庫（git，bitbucket，gitlab）的情況下（ 永遠上傳 ）
• 為該組件創建一個整個模塊，僅將'./X'寫入'X'（ 需要額外的精力，對我來說聽起來並不好 ）

構建文件夾是一個微妙的話題。 它會進行一些分析，以分析哪種方法更適合您的口味，並且沒有正確的方法（即使您找到聲稱這種方法正確的專家 ）

為了更好的方法，您可以查看react文檔：

• https://reactjs.org/docs/faq-structure

  我認為足以滿足您的情況的教程

• https://medium.com/hackernoon/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed

祝好運：）

Answer 3

您應該避免弄亂node_modules文件夾。 最好讓npm或yarn寫入其中。

1. 如果您需要刪除並重新構建node_modules，會發生什么？ 您所有的代碼都會丟失。
2. 如果您要共享代碼或將其推送到遠程存儲庫，將會發生什么。 您將被迫共享周圍的nodes_modules文件夾。
3. 至於react項目的最佳文件結構，請在react網站上查看此文章。 實際上並沒有最佳的結構，這完全取決於您和您的團隊。 通常人們：

按功能分組文件

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

按類型分組文件

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css