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

mfpqipee  于 2022-11-22  发布在  React
关注(0)|答案(2)|浏览(76)

我有一个相当困难的时间尝试导入一个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:同样的问题。我做错了什么?谢谢你的帮助。

eyh26e7m

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”

km0tfn4u

km0tfn4u2#

更新,我终于通过在craco.config.js中做一些魔术使它工作了。craco助手没有帮助太多,我的目标是使资产加载器(没有加载器名称,你必须使用自己的匹配器来找到加载器)忽略yaml扩展,然后添加新的规则来解析yaml内容。最终代码如下:

module.exports = {
    
plugins: [
    {
        plugin: {
            overrideWebpackConfig: ({ context, webpackConfig }) => {
                console.log(webpackConfig.module.rules.find(rule => rule.hasOwnProperty('oneOf')));
                const { isFound, match: fileLoaderMatch } = getLoader(
                    webpackConfig,
                    rule => rule.type === 'asset/resource'
                );

                if (!isFound) {
                    throw {
                        message: `Can't find file-loader in the ${context.env} webpack config!`
                    };
                }

                fileLoaderMatch.loader.exclude.push(/\.ya?ml$/);

                const yamlLoader = {
                    use: 'yaml-loader',
                    test: /\.(ya?ml)$/,
                };
                webpackConfig.module.rules.push(yamlLoader);
                return webpackConfig;
            },
        }
    },
],
}

相关问题