基本理解——React 应用中公共目录的位置答案

【问题标题】：Basic understanding - Location of public directory in React app基本理解——React 应用中公共目录的位置
【发布时间】：2018-05-18 16:32:10
【问题描述】：

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

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

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

【问题讨论】：

index.html 不是 src 的一部分吗？ - 实际上，index.html 不是 src 的一部分。没有它，React 应用程序也可以存在。唯一的index.html 目的是在浏览器中加载脚本:)
但是，文件夹结构类似于代码约定。你可以自己做（因为公共文件夹/入口点等都可以从webpack.config.js 配置），但是有一些统一的标准可以帮助程序员创建可维护的项目。所以主流是将dist作为公用文件夹，src作为邻居文件夹:)

标签： reactjs

【解决方案1】：

你在好几个月前发布了这篇文章，我很惊讶在你提出一个有趣的观点时没有任何回应。

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

但那是过去，现在是。

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

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

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

如今，所有内容都保存在 dist 文件夹中，然后提供给最终用户。创建此dist 文件夹的机制在很大程度上与您如何构建工具的输入以达到最终分发的方式相矛盾。基本上，这些工具不关心 public/src 文件夹的区别，那你为什么要关心呢？

我希望这会有所帮助。我个人在src 文件夹中的index.js 旁边有index.html。进程是src -> bundler -> dist（就像好的旧C编程：src -> 编译器 -> exe）。

【讨论】：