浏览器端React项目i18next能否不依赖js-yaml使用YAML资源文件

所有主流浏览器的原生环境都没有内置YAML解析/序列化能力，不存在零依赖直接在浏览器端原生解析YAML文件的方案，i18next本身也默认不支持直接读取YAML格式资源。

为什么原生做不到 #

• YAML不属于W3C等标准组织规定的浏览器需内置支持的格式范畴，目前浏览器原生仅内置了JSON、基础文本、多媒体等格式的处理能力，没有暴露任何YAML相关的全局API。
• 直接通过fetch或者静态导入拿到的YAML文件内容只是纯字符串，i18next无法识别这种纯字符串格式的资源，必须先转成结构化JS对象才能正常使用。

不引入js-yaml等运行时依赖的可行方案 #

如果不想在生产环境的运行时代码里引入YAML解析库增加包体积，可以走构建时预解析的思路，解析动作放在Node侧的打包阶段完成，浏览器运行时拿到的直接是可直接使用的结构化JS对象，完全不需要在客户端做解析：

• 利用现有构建工具的内置YAML处理能力
  如果你是用Vite搭建的React项目，Vite 2.0及以上版本已经内置了YAML文件的解析支持，不需要额外安装任何运行时依赖，直接在代码里导入YAML文件就能拿到解析好的对象，直接传给i18next即可：

  // 直接导入YAML格式的语言包，构建阶段会自动转成JS对象
  import zh from './locales/zh-CN.yaml'
  import en from './locales/en-US.yaml'
  
  i18next.init({
    resources: {
      zh: { translation: zh },
      en: { translation: en }
    }
  })
  

  如果用Webpack、Rollup等其他构建工具，也可以在构建配置里添加对应的YAML转换loader，同样是在构建阶段完成解析，不会把YAML解析逻辑打包进前端产物里。
• 提前预处理转换资源格式
  可以在项目里加一个预处理脚本，在启动开发服务、执行生产构建前，自动扫描所有YAML格式的国际化文件，批量转换成JSON格式文件存到指定目录，业务代码里直接引入转换后的JSON文件即可，整个过程不需要在前端运行时加载任何YAML解析相关代码。

注意避坑 #

不要尝试自己写简单的字符串切割、正则匹配逻辑来解析YAML，YAML的语法规则覆盖了缩进嵌套、多行文本、锚点引用、自动类型转换等大量边界场景，手写解析逻辑很容易出现隐蔽的兼容问题，后续维护成本极高。

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