create-react-app 使用 public 文件夹

🌙
手机阅读
本文目录结构
axihe

前置条件

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

更改HTML

public 文件夹包含 HTML 文件,因此你可以对其进行调整,例如,设置页面标题

带有编译代码的 <script>,会在构建过程中自动添加。

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

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

请注意,通常我们建议您改为import使用JavaScript文件。

例如,请参阅有关 添加一个样式表 以及 添加图片和字体 部分。这种机制提供了许多好处:

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

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

如果将文件放入 public 文件夹,Webpack 将 不会 处理它。

相反,它将被复制到构建文件夹中。

PUBLIC_URL

要引用 public 文件夹中的资源,需要使用名为 PUBLIC_URL 的特殊变量。

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

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

只有 %PUBLIC_URL% 前缀才能访问 public 文件夹中的文件。

如果你需要使用 srcnode_modules 中的文件,则必须将其复制到 public 文件夹,以显式指定将该文件作为构建的一部分的意图。

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

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

render() {
  // 注意:这是一个逃生舱(escape hatch),应该谨慎使用!
  // 通常我们建议使用`import`来获取资源的 URL 
  // 如“添加图片和字体”中所述。
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

请记住这种方法的缺点:

  • public 文件夹中的所有文件都不会进行后处理或压缩。
  • 在编译时不会调用丢失的文件,并且会导致用户出现 404 错误。
  • 结果文件名不包含内容哈希值,因此你需要自己手动添加时间戳(以便清除浏览器缓存)。

何时使用 public 文件夹

通常我们建议从 JavaScript 导入 stylesheets ,图片和字体。

public文件夹可用作许多不常见情况的变通方法:

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

请注意,如果添加声明全局变量的 <script> ,则还需要知道怎么使用它们。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang