基本理解 - React 应用程序中公共目录的位置

Question

我正在使用 webpack 构建一个 React 应用程序。我很好奇将我的“公共”文件夹放在哪里。我知道在 create-react-apps 中，公共文件夹位于“src”文件夹之外。

我不确定我是否清楚为什么您希望将公共资产放在源文件夹之外。index.html 不是 src 的一部分吗？这不是你的代码的关键部分吗？为什么要将公用文件夹单独放在外面？

我正在尝试找到有关该主题的好读物，但文件夹结构似乎非常主观。如果有人能解释这一点，我将不胜感激。我想牢固地理解为什么 public 文件夹位于 create-react-app 中的 src 文件夹之外。

Answer 1

您在几个月前发布了这篇文章，令我惊讶的是，当您提出一个有趣的观点时，却没有任何回应。

我相信这个答案有些历史性。在过去，公用文件夹确实是public，这意味着它包含结构良好且手工制作的index.html文件，也许还包含一些其他工件。这些旨在“按原样”使用，而应用程序的其他部分（即 JavaScript）保留在自己的文件夹中进行转译、合并等。

但那是过去，这是现在。

随着现代打包/捆绑工具（webpack、brunch、parcel 等）的出现，这种区别不再相关，也没有人真正考虑过它。

使用这些捆绑工具，一切都是“源代码”（正如您所指出的），工具将转换index.html为正确引用捆绑的 CSS 和 JavaScript 代码。

因此，虽然我不能直接代表团队发言create-react-app，但我认为文件夹概念在很大程度上是不合时宜的，可以追溯到它真正公开public的时代。

如今，所有内容最终都会存放在一个dist文件夹中，然后提供给最终用户。创建此文件夹的机制dist对于如何构建工具的输入以达到最终发行版来说在很大程度上是矛盾的。基本上，这些工具不关心 public/src 文件夹的区别，那么为什么要关心呢？

我希望这有帮助。我个人就在文件夹index.html旁边。该过程是->捆绑器-> （就像老式的 C 编程一样：->编译器-> ）。index.jssrcsrcdistsrcexe