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

问题描述

我是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？

解决方法

您可以将JSON文件导入组件中。这是推荐的方法，而不要使用具有缺点的public var路径。

来自React文档

您还可以将其他资产添加到公用文件夹。请注意，我们通常鼓励您改为将资源导入JavaScript文件中（...）如果将文件放入公用文件夹，则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错误。
结果文件名不包含内容哈希，因此您需要添加查询参数或在每次更改时重命名它们。

create-react-app public-folders reactjs reactjs reactjs reactjs webpack webpack webpack