Create React App 使用 public 文件夹

注意:此功能适用于 react-scripts@0.5.0 及更高版本。

更改HTML

public 文件夹包含 HTML 文件,因此你可以对其进行调整,例如,设置页面标题。带有编译代码的 <script> 标记将在构建过程中自动添加到该标记中。

在模块系统之外添加静态资源

你还可以将其他资源添加到 public 文件夹。

请注意,我们通常建议你改为在 JavaScript 文件中导入资源。例如,请参阅有关 添加一个样式表 以及 添加图片和字体 部分。这种机制提供了许多好处:

  • 脚本和样式被压缩并打包在一起,以避免额外的网络请求。
  • 缺少文件会导致编译错误,而不是给用户 404 错误。
  • 结果文件名包含内容哈希,因此你无需担心浏览器会缓存旧版本。

但是,你可以使用 escape hatch(逃生舱) ,在模块系统之外添加资源。

如果将文件放入 public 文件夹,Webpack 将 不会 处理它。相反,它将被复制到构建文件夹中。要引用 public 文件夹中的资源,需要使用名为 PUBLIC_URL 的特殊变量。

index.html 中,你可以像这样使用它:

----- ------------- ----- --------------------------------

只有 %PUBLIC_URL% 前缀才能访问 public 文件夹中的文件。如果你需要使用 srcnode_modules 中的文件,则必须将其复制到 public 文件夹,以显式指定将该文件作为构建的一部分的意图。

当你运行 npm run build 时,Create React App 将使用正确的绝对路径替换 %PUBLIC_URL% ,这样即使你使用客户端路由或将其托管在 non-root 上,你的项目也能正常工作。

在 JavaScript 代码中,你可以使用 process.env.PUBLIC_URL 用于类似目的:

-------- -
  -- ----------------- --------------
  -- ---------------------- --- 
  -- ------ -------------
  ------ ---- ----------------------------- ---- ---- ------ ----------------
-

请记住这种方法的缺点:

  • public 文件夹中的所有文件都不会进行后处理或压缩。
  • 在编译时不会调用丢失的文件,并且会导致用户出现 404 错误。
  • 结果文件名不包含内容哈希值,因此你需要添加查询参数或在每次更改时重命名它们(,以便清除浏览器缓存)。

何时使用 public 文件夹 When to Use the public Folder

通常我们建议从 JavaScript 导入 stylesheets ,图片和字体 。 public文件夹可用作许多不常见情况的变通方法:

  • 你需要在构建输出中具有特定名称的文件,例如 manifest.webmanifest
  • 你有数千张图片,需要动态引用它们的路径。
  • 你希望在打包代码之外包含一个像 pace.js 这样的小脚本。
  • 某些库可能与 Webpack 不兼容,你没有其他选择,只能将其包含为 <script> 标记。

请注意,如果添加声明全局变量的 <script> ,则还需要阅读有关使用它们的下一部分。


上一篇:添加图片,字体和文件
下一篇:代码拆分(Code Splitting)