React Native for Web（Expo）项目如何按环境变量切换自定义扩展名文件编译？

核心思路 #

借助Expo默认打包工具Metro的解析配置，结合环境变量调整文件匹配优先级，让import './foo'自动指向对应客户后缀的文件，同时排除无关文件，无需使用动态导入。

具体步骤 #

1. 配置环境变量 #

在项目根目录创建环境配置文件（如.env.company1、.env.company2），写入对应客户标识：

CUSTOMER=company1

若项目未集成dotenv，执行npm install dotenv --save-dev完成安装。

2. 修改Metro打包配置 #

在项目根目录创建或编辑metro.config.js，引入环境变量并配置解析规则：

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

const config = getDefaultConfig(__dirname);
const customer = process.env.CUSTOMER;

// 提升带客户后缀的文件解析优先级
config.resolver.sourceExts = [
  `${customer}.ts`,
  ...config.resolver.sourceExts,
];

// 排除非当前客户的文件
const excludedCustomers = ['company1', 'company2'].filter(c => c !== customer).join('|');
config.resolver.blacklistRE = new RegExp(`\\.(${excludedCustomers})\\.ts$`);

module.exports = config;

• sourceExts将当前客户后缀的文件扩展名放在最前，Metro解析时会优先匹配
• blacklistRE通过正则过滤掉其他客户的文件，避免被编译打包

3. 配置TypeScript识别规则 #

修改tsconfig.json，添加路径映射确保TypeScript能正确识别导入：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["*", `*.${process.env.CUSTOMER}`]
    },
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

这样TypeScript不会对import './foo'报模块找不到的错误。

4. 启动项目 #

加载对应环境变量启动项目：

# 直接指定环境变量
CUSTOMER=company1 npx expo start

# 或加载指定环境文件
dotenv -e .env.company1 -- npx expo start

效果验证 #

当CUSTOMER=company1时：

• import './foo'会自动导入foo.company1.ts
• foo.ts和foo.company2.ts会被排除，不参与编译打包

若需支持.tsx等其他文件类型，只需在sourceExts和blacklistRE中添加对应扩展名即可。

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