React Native如何实现自定义配置专属代码扩展 剔除冗余打包代码

可以通过Babel配合打包工具配置实现该需求，具体方案如下：

• 核心原理：React Native原生的平台专属后缀匹配本质是模块解析阶段的优先级加载逻辑，我们可以通过Babel的模块解析插件自定义不同环境的后缀加载优先级，同时配合打包工具的文件过滤规则，确保非目标环境的代码不会被打入最终产物。

步骤1：安装依赖 #

安装Babel模块解析插件：

npm install babel-plugin-module-resolver --save-dev
# 或用yarn
yarn add babel-plugin-module-resolver --dev

步骤2：配置Babel规则 #

修改项目根目录的babel.config.js，根据当前构建环境配置后缀优先级：

module.exports = (api) => {
  api.cache(true);
  // 从环境变量读取当前构建类型，取值为dev/preprod/release，可根据你的打包脚本调整
  const currentEnv = process.env.BUILD_ENV || 'dev';

  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./src'],
          // 后缀优先级从高到低排列，当前环境的专属后缀优先级最高
          extensions: [
            `.${currentEnv}.ts`,
            `.${currentEnv}.tsx`,
            '.native.ts',
            '.native.tsx',
            '.ts',
            '.tsx',
            '.js',
            '.json'
          ],
        },
      ],
    ],
  };
};

配置完成后，你在代码中直接写import Customdata from './Customdata'即可，构建时会自动根据当前环境优先加载对应后缀的文件，没有对应专属文件时会自动降级加载普通的Customdata.ts。

步骤3：配置非目标环境文件过滤规则 #

要确保非对应环境的代码不会被打入产物，需要在Metro（React Native默认打包工具）配置中添加黑名单规则，直接屏蔽其他环境的专属文件：
修改项目根目录的metro.config.js：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const currentEnv = process.env.BUILD_ENV || 'dev';

// 生成需要屏蔽的环境后缀正则
const excludeEnvs = ['dev', 'preprod', 'release'].filter(env => env !== currentEnv);
const blockList = new RegExp(`.*\\.(${excludeEnvs.join('|')})\\.(ts|tsx|js)$`);

const config = {
  resolver: {
    blockList,
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

使用示例 #

你只需要在打包脚本中注入对应的环境变量即可，比如打release包时：

BUILD_ENV=release npx react-native run-android --variant=release

此时打包工具会自动加载.release.ts后缀的文件，同时屏蔽所有.dev.ts、.preprod.ts的文件，不会将其打入最终产物。

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