Skip to main content

使用公共文件夹

注意：react-scripts@0.5.0 及更高版本提供此功能。

¥Note: this feature is available with react-scripts@0.5.0 and higher.

更改 HTML​

¥Changing the HTML

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

¥The public folder contains the HTML file so you can tweak it, for example, to set the page title. The <script> tag with the compiled code will be added to it automatically during the build process.

在模块系统之外添加资源​

¥Adding Assets Outside of the Module System

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

¥You can also add other assets to the public folder.

请注意，我们通常鼓励你使用 JavaScript 文件中的 import 资源。例如，参见 添加样式表 和 添加图片和字体 部分。这种机制提供了许多好处：

¥Note that we normally encourage you to import assets in JavaScript files instead. For example, see the sections on adding a stylesheet and adding images and fonts. This mechanism provides a number of benefits:

  • 脚本和样式表被压缩并打包在一起以避免额外的网络请求。

    ¥Scripts and stylesheets get minified and bundled together to avoid extra network requests.

  • 丢失文件会导致编译错误，而不是用户的 404 错误。

    ¥Missing files cause compilation errors instead of 404 errors for your users.

  • 结果文件名包含内容哈希，因此你无需担心浏览器会缓存其旧版本。

    ¥Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

但是，你可以使用应急方案在模块系统之外添加资源。

¥However there is an escape hatch that you can use to add an asset outside of the module system.

如果将文件放入 public 文件夹中，webpack 不会处理该文件。而是，它将被原封不动地复制到构建文件夹中。要引用 public 文件夹中的资源，你需要使用名为 PUBLIC_URL 的环境变量。

¥If you put a file into the public folder, it will not be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.

在 index.html 内部，你可以这样使用它：

¥Inside index.html, you can use it like this:

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

%PUBLIC_URL% 前缀只能访问 public 文件夹中的文件。如果你需要使用来自 src 或 node_modules 的文件，则必须将其复制到那里以明确指定你打算将该文件作为构建的一部分。

¥Only files inside the public folder will be accessible by %PUBLIC_URL% prefix. If you need to use a file from src or node_modules, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.

当你运行 npm run build 时，Create React App 会将 %PUBLIC_URL% 替换为正确的绝对路径，因此即使你使用客户端路由或将其托管在非根 URL 上，你的项目也能正常运行。

¥When you run npm run build, Create React App will substitute %PUBLIC_URL% with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.

在 JavaScript 代码中，你可以将 process.env.PUBLIC_URL 用于类似目的：

¥In JavaScript code, you can use process.env.PUBLIC_URL for similar purposes:

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

请记住这种方法的缺点：

¥Keep in mind the downsides of this approach:

  • public 文件夹中的所有文件均未进行后处理或压缩。

    ¥None of the files in public folder get post-processed or minified.

  • 丢失的文件不会在编译时被调用，并且会给你的用户带来 404 错误。

    ¥Missing files will not be called at compilation time, and will cause 404 errors for your users.

  • 结果文件名不会包含内容哈希，因此你需要添加查询参数或在每次更改时重命名它们。

    ¥Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.

何时使用 public 文件夹​

¥When to Use the public Folder

通常我们建议从 JavaScript 导入 样式表、图片和字体。public 文件夹可用作许多不太常见情况的解决方法：

¥Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:

  • 你需要一个在构建输出中具有特定名称的文件，例如 manifest.webmanifest。

    ¥You need a file with a specific name in the build output, such as manifest.webmanifest.

  • 你有数以千计的图片，需要动态引用它们的路径。

    ¥You have thousands of images and need to dynamically reference their paths.

  • 你希望在打包代码之外包含一个像 pace.js 这样的小脚本。

    ¥You want to include a small script like pace.js outside of the bundled code.

  • 某些库可能与 webpack 不兼容，你别无选择，只能将其作为 <script> 标签包含在内。

    ¥Some libraries may be incompatible with webpack and you have no other option but to include it as a <script> tag.

请注意，如果你添加一个声明全局变量的 <script>，你应该阅读下一节中的主题 使用全局变量，其中解释了如何引用它们。

¥Note that if you add a <script> that declares global variables, you should read the topic Using Global Variables in the next section which explains how to reference them.