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';来导入我的组件更好。但是开发这个组件变得很麻烦，因为每当我进入node文件夹时，它就有数百万个webpack或babel或mini-CSS-extractor所需的其他模块。

在node_modules中是否有更好的组织解决方案，或者我应该在全球范围内安装开发工具？

Answer 1

当然，您不应该将组件保留在node_modules目录中，在那儿，您只能保留应用程序的依赖项。这可能是一个不错的read for you。尤其是在使用git存储库时，不应在其中复制node_modules目录，因为正如您所注意到的那样-这很麻烦。克隆存储库后，让其他使用此代码的人自己安装依赖项。

约定很少-一种约定是将组件保留在src/目录中。我的建议是在全局安装create-react-app（用于React网站的样板生成器，available here）并检查其约定。对您来说应该是一个很棒的课程。

与我有关的一件事是，为什么每个组件中都有package.json？整个项目应该只有一个package.json文件。 Read here。

如果您希望文件路径更短并且更易于阅读/使用，则可以使用Webpack like this创建别名。

Answer 2

将组件放在node_modules文件夹中不是一个好主意。除非，否则您将通过其他工具/框架在团队之间创建可共享代码。使用您的组件会产生一堆尚未遇到的问题：(！！p

i.e节点模块提供了仅使用package.json共享代码并使用.gitignore忽略代码的灵活性。并通过npm install重新安装它们。

您能在这里看到问题吗？

现在要在节点模块内共享组件，这些选项是：

可以在不丢失文件夹的情况下推送文件（毕竟不是一个选择：（）
发送整个应用程序和可能巨大的模块，并迫使每个人都必须下载大量的仓库，甚至在上载到存储库（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写入其中。

如果您需要删除node_modules并重建它，将会发生什么？您所有的代码都会丢失。
如果您要共享代码或将其推送到远程存储库，将会发生什么。您将被迫共享周围的nodes_modules文件夹。
关于React项目的最佳文件结构，checkout this article on react website. 实际上并没有最佳的结构，这完全取决于您和您的团队。通常的人：

按功能分组文件

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

ES6导入和node_modules地狱

3 个答案: