TypeScript编译时按平台区分引入文件的方案问询

你遇到的这个问题其实是TypeScript默认不识别.native.tsx/.web.tsx这类平台特定后缀导致的，下面几个方案都是无需手动复制删除文件的优雅解决方式：

方案1：配置TypeScript的moduleSuffixes（推荐） #

TypeScript本身提供了moduleSuffixes配置项，专门用来指定模块解析时优先查找的文件后缀。你可以针对不同平台创建对应的tsconfig配置文件，实现精准的模块解析：

1. 创建tsconfig.web.json和tsconfig.native.json，继承主tsconfig.json的基础配置：

   // tsconfig.web.json
   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "moduleSuffixes": [".web.tsx", ".web.ts", ".tsx", ".ts"]
     }
   }
   
   // tsconfig.native.json
   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "moduleSuffixes": [".native.tsx", ".native.ts", ".tsx", ".ts"]
     }
   }
   

2. 修改package.json里的启动/编译命令，指定对应平台的tsconfig：

   {
     "scripts": {
       "start:web": "react-scripts start --tsconfig tsconfig.web.json",
       "build:web": "react-scripts build --tsconfig tsconfig.web.json",
       "start:native": "react-native start",
       "build:native": "tsc -p tsconfig.native.json && react-native run-android"
     }
   }
   

这样当你导入./routing时，TypeScript会根据当前使用的tsconfig优先匹配对应平台的文件，从根源解决模块找不到的报错。

方案2：使用Craco扩展Create React App配置（无需Eject） #

如果你的CRA版本不支持直接指定tsconfig参数，或者不想维护多个配置文件，可以用@craco/craco来扩展配置：

1. 安装依赖：

   npm install @craco/craco cross-env --save-dev
   

2. 创建craco.config.js，根据环境变量动态设置模块后缀优先级：

   module.exports = {
     typescript: {
       configure: (config) => {
         // 根据PLATFORM环境变量判断当前平台
         const isWeb = process.env.PLATFORM === 'web';
         config.compilerOptions.moduleSuffixes = isWeb
           ? [".web.tsx", ".web.ts", ".tsx", ".ts"]
           : [".native.tsx", ".native.ts", ".tsx", ".ts"];
         return config;
       }
     }
   };
   

3. 更新package.json的脚本命令：

   {
     "scripts": {
       "start:web": "cross-env PLATFORM=web craco start",
       "build:web": "cross-env PLATFORM=web craco build",
       "start:native": "cross-env PLATFORM=native craco start"
     }
   }
   

方案3：添加类型声明文件兜底（临时过渡） #

如果上面的配置暂时无法生效，你可以先添加一个兜底的类型声明文件，让TypeScript识别导入路径：

// routing.d.ts
declare module './routing' {
  // 根据当前开发环境切换导出的模块
  export * from './routing.web'; // Web开发时启用
  // export * from './routing.native'; // Native开发时切换为这行
}

不过这个方案只是临时过渡，还是前两个方案更优雅，能彻底解决模块解析的问题。

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