React Native Expo项目中babel-plugin-content-transformer插件失效求助

核心原因 #

Metro默认会将YAML文件识别为静态资源，返回资源ID而非文件内容，这会导致Babel插件babel-plugin-content-transformer无法生效。以下是分步解决方案：

1. 确认依赖安装完整 #

确保已安装所需开发依赖：

# npm
npm install --save-dev babel-plugin-content-transformer yaml

# yarn
yarn add --dev babel-plugin-content-transformer yaml

# pnpm
pnpm add -D babel-plugin-content-transformer yaml

（注：yaml依赖仅当你需要将YAML解析为对象时需要，若只需要原始文本可忽略）

2. 修改Metro配置，排除YAML资源处理 #

创建或更新项目根目录下的metro.config.js，阻止Metro将YAML文件当作资源处理：

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);

// 移除yaml/yml的资源扩展名列表
config.resolver.assetExts = config.resolver.assetExts.filter(
  ext => ext !== 'yaml' && ext !== 'yml'
);

module.exports = config;

3. 确保Babel配置正确生效 #

保留你原有的babel.config.js配置，之后清除Expo缓存以加载新配置：

npx expo start --clear

若仍有问题，可尝试将插件配置调整为更明确的写法：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'content-transformer',
        {
          transformers: [
            {
              file: /\.ya?ml$/,
              format: 'string', // 原始文本模式；若要转为对象则用'yaml'
            },
          ],
        },
      ],
    ],
  };
};

4. 添加TypeScript类型声明 #

在项目中创建类型声明文件（如src/types/yaml.d.ts），让TypeScript识别YAML模块：

// 原始文本模式的类型声明
declare module '*.yaml' {
  const content: string;
  export default content;
}

declare module '*.yml' {
  const content: string;
  export default content;
}

// 若使用yaml格式转为对象，替换为：
// declare module '*.yaml' {
//   const content: Record<string, unknown>;
//   export default content;
// }

确保tsconfig.json的include数组包含该类型文件路径。

5. 验证批量加载功能 #

配置完成后，即可使用插件的批量导入功能：

import yamlFiles from '../data/*.yaml'; // 会返回包含所有YAML文件内容的数组

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