如何确保React Native项目中Babel同时编译TS与JS文件？

先给明确结论 #

你当前.babelrc里的@babel/preset-typescript是多余的，完全可以删掉——metro-react-native-babel-preset已经内置了TypeScript支持，足够完成你“TS做类型检查、Babel负责编译”的需求。

1. 不用Babel CLI，怎么确保Babel处理.ts文件？ #

React Native的打包工具Metro会自动接管Babel的调用流程：

• 开发时的热重载、生产打包阶段，Metro会自动识别项目里的.ts/.tsx/.js/.jsx文件，不需要你手动运行Babel CLI或指定扩展名。
• Metro本身已经默认配置了支持TS相关扩展名的解析规则，这个环节完全不用你操心。

2. allExtensions、isTSX选项要不要配置？ #

首先，既然你不需要@babel/preset-typescript，这两个选项对你来说根本没必要碰。如果非要深究：

• allExtensions：开启后会让所有文件（包括纯.js）都被当作TypeScript解析，这会导致普通JS文件出现语法错误，绝对不能开。
• isTSX：强制把文件按TSX（带JSX的TypeScript）解析，只有.tsx文件需要这个配置，普通.ts或.js文件完全不需要，所以那个博客的建议是对的，别乱开这个选项。

3. 为什么metro预设已经包含TS支持，还要纠结？ #

正如你补充说明里提到的，metro-react-native-babel-preset自带的TypeScript Babel插件，核心功能就是剥离类型信息——这和@babel/preset-typescript的核心作用完全一致。你已经在使用这个预设，再加@babel/preset-typescript属于重复配置，甚至可能引发冲突。

4. React Native内置Babel，为什么还要在babelrc里加metro预设？ #

React Native确实内置了Babel，但它的默认配置就是基于metro-react-native-babel-preset的。当你创建自定义的.babelrc（或babel.config.js）时，相当于覆盖了默认配置，必须手动把这个预设加回去：

• 这个预设包含了适配React Native环境的所有必要规则：比如JSX转换、ES6+语法降级、平台特定代码处理等。
• 如果不加，Babel会用通用的基础配置，无法满足React Native的编译需求。

优化后的.babelrc配置 #

删掉多余的@babel/preset-typescript即可：

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["."]
    }]
  ]
}

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