我有一个相当困难的时间尝试导入一个YAML文件作为一个JS对象在我的React代码。
我用create-react-app
构建了这个simple and reproductible CodeSandbox example来说明我的问题。
我所做的一切就是:
- 在
craco.config.js
文件中配置Webpack(按照craco
文档中的建议), - 为YAML加载程序添加一些Webpack配置代码(如
yaml-loader
文档中所建议)。 - 在
index.js
文件中导入YAML文件,以便将其用作JS对象。
第一个
在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
:同样的问题。我做错了什么?谢谢你的帮助。
2条答案
按热度按时间eyh26e7m1#
同样的问题。我最初认为这是craco版本的问题(因为我通过
yarn add craco
而不是yarn add -D @craco/craco
添加包),但是没有,同样的结果。我花了几天时间来找到解决这个问题的方法,在craco.config.js中尝试了不同的配置,但是仍然没有运气。我最终使用了解决这个问题的方法,直到找到根本原因。1.使用fetch方法,通过http请求检索yaml文件作为静态内容
1.如果yaml用于react-i18 next,则使用“i18 next-http-backend”
km0tfn4u2#
更新,我终于通过在
craco.config.js
中做一些魔术使它工作了。craco助手没有帮助太多,我的目标是使资产加载器(没有加载器名称,你必须使用自己的匹配器来找到加载器)忽略yaml扩展,然后添加新的规则来解析yaml内容。最终代码如下: