关于create-react-app公用文件夹读取不同文件的问题

Question

我是 Reactjs 和 Javascript 的初学者。
我read那个create-react-app可以像这样访问公用文件夹来获取图片：

  img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

但这也有效，但找不到有关它的文档：

  let photo = '/img/logo.png';

另一件事是，如果我尝试以同样的方式读取 json 文件失败：

let someJson = process.env.PUBLIC_URL + 'resume.json';

测试代码

 return (
      <div className="App">
      <header className="App-header">
        <img src={photo} className="App-logo" alt="logo" />
        <p>
         {someJson.basics.name} // FAIL ...
        </p>
      </header>
    </div>
  );

json

{
  "basics": {
    "name": "Foo Bar"
    }
}

为什么我可以得到图像而不是 json？

Answer 1

您可以在组件中导入 JSON 文件。这是推荐的方式，而不是使用有缺点的公共 var 路径。

来自 React 文档

您还可以将其他资产添加到公用文件夹。 请注意，我们通常鼓励您在 JavaScript 文件中导入资产 (...) 如果你把一个文件放到 public 文件夹中，它不会被 webpack 处理。相反，它将被原封不动地复制到构建文件夹中。要引用公用文件夹中的资产，您需要使用名为 PUBLIC_URL 的环境变量。

import React from "react";
// resume JSON file is at the same level than this file
import resume from "./resume.json";

export default function App() {
  return (
    <div className="App">
      <p>{resume.basics.name}</p>
    </div>
  );
}

列出了使用 %PUBLIC_URL%（在 Node 中）或 process.env.PUBLIC_URL（在 JavaScript 中）的缺点

• 公用文件夹中的所有文件均未经过后处理或缩小。
• 在编译时不会调用丢失的文件，并且会导致用户出现 404 错误。
• 结果文件名不包含内容哈希，因此您需要在每次更改时添加查询参数或重命名它们。