使用 craco 和 yaml-loader 在 React 中导入 YAML 文件答案

【问题标题】：Import a YAML file in React with craco and yaml-loader使用 craco 和 yaml-loader 在 React 中导入 YAML 文件
【发布时间】：2022-11-21 16:09:23
【问题描述】：

我很难尝试将 YAML 文件导入为 JS 对象在我的 React 代码中。

我用create-react-app 制作了这个simple and reproductible CodeSandbox example 以显示我的问题。

我所做的只是：

在 craco.config.js 文件中配置 Webpack（如 craco docs 中所推荐），
为 YAML 加载器添加一些 Webpack 配置代码（如 yaml-loader docs 中所推荐）。
在index.js 文件中导入 YAML 文件，以便我可以将其用作 JS 对象。

// craco.config.js

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.yaml$/,
            use: "yaml-loader"
          }
        ],
      },
    },
  },
};

// index.js
...
import testYamlFile from "./testYamlFile.yaml"

ReactDOM.render(
  <>
    <p>Parsed test YAML file object: {testYamlFile}</p>
    <p>Type of parsed object: {typeof testYamlFile}</p>
  </>,
  document.getElementById("root")
);

// Output in CodeSandbox browser:

Parsed test YAML file object: data:application/octet-stream;base64,aGVsbG9Xb3JsZEZvck1vZGVsOiBIZWxsbywgZGVhciBtb2RlbCAhCg==
Type of parsed object: string

在 CodeSandbow 示例中，我得到一个 base64 字符串，所以您会告诉我，我只需要解码它并获取内容。但是有两件事：

首先，这不是我想要的：我应该根据 yaml-loader 文档获取一个 JS 对象
其次，我在 PC 上得到的东西——我只能在我的机器上复制它，尽管我尽最大努力在 CodeSandox 中复制完全相同的项目——甚至更奇怪。实际上，我只得到了捆绑的文件路径，仅此而已：

// Output in my own local browser:

Parsed test YAML file object: /static/media/testYamlFile.5a3cab37.yaml
Type of parsed object: string

我想是因为 Webpack 将其唯一 ID 添加到文件名中，所以它正在识别并捆绑 yaml 文件。但是我不明白为什么我不能在我的代码中访问它的内容。

还尝试使用 js-yaml-loader 而不是 yaml-loader：同样的问题。我究竟做错了什么？谢谢你的帮助。

【问题讨论】：

标签： reactjs webpack yaml create-react-app craco

【解决方案1】：

同样的问题在这里。我最初认为这是 craco 版本问题（因为我通过 yarn add craco 而不是 yarn add -D @craco/craco 添加包）但不是，结果相同。我花了几天时间才找到解决方案，在 craco.config.js 中尝试了不同的配置，但仍然没有成功。我最终为此使用了解决方法，直到找到根本原因。

使用fetch方法，通过http请求获取静态内容的yaml文件
如果 yaml 用于 react-i18next，请使用“i18next-http-backend”

【讨论】：