Expo编译Web项目时无法找到TypeScript别名的问题

问题原因 #

Android构建正常但Web失败，核心原因是Babel的module-resolver插件仅负责代码转译阶段的别名解析，而Expo Web的打包工具Webpack在打包环节需要单独配置别名规则，二者配合才能让Web环境正确识别@开头的路径别名。

解决方案 #

1. 确认依赖安装完整性 #

虽然你已在Babel配置中使用module-resolver，仍需确认插件是否安装：

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

2. 添加Webpack别名配置 #

在项目根目录创建webpack.config.js，通过覆盖Expo默认Webpack配置来添加别名：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  // 配置Webpack识别@别名
  config.resolve.alias['@'] = __dirname + '/src';
  
  return config;
};

3. （TypeScript项目可选）配置TS路径映射 #

如果项目使用TypeScript，在tsconfig.json的compilerOptions中添加路径配置，确保TS语法检查和编辑器识别别名：

{
  "compilerOptions": {
    // 保留原有配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

4. 清除缓存并重启构建 #

执行命令清除Expo缓存后重新启动Web构建服务：

npx expo start --web --clear

完成以上步骤后，重新构建Web版本即可正常识别@/db模块。

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