React导入yaml文件时CodeSandbox返回内容本地返回路径问题咨询

1. 确认本地项目的脚手架类型 #

• 如果是用create-react-app（CRA）创建的项目，默认没有配置yaml文件的内容加载loader，默认会把未识别的静态资源文件当做静态资源处理，导入时返回资源路径，这就是你本地拿到带哈希路径的核心原因
• CodeSandbox的React模板默认内置了yaml-loader或raw-loader针对yaml文件的处理规则，所以直接导入会返回文件内容

2. 检查打包工具的静态资源处理配置 #

• 如果你用的是CRA未eject的项目，可以先查看package.json里有没有craco、react-app-rewired这类覆盖CRA配置的工具，确认是否配置了yaml的加载规则
• 如果是自己搭建的webpack项目，查看webpack配置中module.rules字段下针对.yaml/.yml后缀的匹配规则：
  • 如果配置的是file-loader，导入就会返回资源路径
  • 如果配置的是raw-loader，导入会返回yaml的原始文本内容
  • 如果配置的是yaml-loader，导入会返回解析后的JS对象

3. 确认依赖安装情况 #

• 检查本地package.json的devDependencies里是否安装了raw-loader/yaml-loader，CodeSandbox会自动补全部分默认loader依赖，本地如果缺对应的loader会fallback到默认的静态资源处理逻辑

快速适配方案 #

如果要快速实现本地和CodeSandbox行为一致，可以选两种方案：

• 方案1：把yaml后缀改成.txt，CRA默认导入txt文件会直接返回文本内容
• 方案2：安装raw-loader后，用inline loader写法临时覆盖默认配置：import test from '!raw-loader!./test.yaml'

内容的提问来源于stack exchange，提问作者nino