如何配置Expo Web构建源映射，在Chrome DevTools中显示TS源文件？

问题说明 #

使用Expo（基于Metro）开发React Native TypeScript应用，通过expo start --web启动Web模式时，Chrome DevTools的控制台日志仅指向编译后的JS文件，Sources面板也只显示JS文件，无法访问TS源文件；但Expo Go和原生开发构建中该功能正常。

解决方案 #

1. 配置Metro启用Web源映射 #

在项目根目录的metro.config.js中，确保Web配置里开启源映射：

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

const config = getDefaultConfig(__dirname);

// 支持TS/TSX文件解析
config.resolver.sourceExts.push('ts', 'tsx');

// 启用Web源映射
config.web = {
  ...config.web,
  devServer: {
    ...config.web.devServer,
    sourceMap: true,
  },
};

module.exports = config;

2. 确认TypeScript配置 #

检查项目根目录的tsconfig.json，确保compilerOptions中启用源映射相关配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    // 保留其他已有配置
  }
}

3. 清除缓存并重启项目 #

执行以下命令清除Metro和Expo缓存，避免旧缓存导致源映射失效：

npx expo start --web --clear

4. 验证Chrome DevTools的源映射设置 #

打开Chrome DevTools，点击右上角齿轮图标进入Settings，在Sources选项卡下确保勾选：

• Enable JavaScript source maps
• Enable CSS source maps

完成以上操作后，Chrome DevTools的Sources面板会显示你的TypeScript源文件，控制台日志也会直接指向TS文件的对应代码行。

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