非CRA的TypeScript React项目：需Babel还是用ts-loader处理JS/JSX？

方案一：用ts-loader直接处理JS/JSX文件 #

不需要额外配置Babel，调整现有规则就能让ts-loader接管所有脚本文件：

• 修改webpack规则里的test正则为/\.([jt]sx?)$/，匹配.js、.jsx、.ts、.tsx文件
• 打开tsconfig.json，将allowJs设为true，允许TypeScript编译器处理JS文件
• 注意事项：如果JS文件包含ESNext语法，要确保tsconfig的target（如ESNext或ES6）和lib（如["DOM", "ESNext"]）配置能覆盖编译需求；当前开启的transpileOnly: true会跳过类型检查，JS文件的类型校验可通过tsc --noEmit单独执行

修改后的webpack规则示例：

{
  test: /\.([jt]sx?)$/, // 匹配所有js/jsx/ts/tsx文件
  exclude: /(node_modules|\.webpack)/,
  use: {
    loader: 'ts-loader',
    options: {
      transpileOnly: true,
    },
  },
}

tsconfig.json关键配置：

{
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react-jsx", // 根据React版本调整，旧版本可用"react"
    "target": "ESNext",
    "lib": ["DOM", "ESNext"]
  }
}

方案二：用Babel处理所有脚本文件 #

如果项目需要Babel生态的特性（如特定插件、精细polyfill配置、兼容老旧浏览器），可以用Babel统一处理所有脚本文件：

• 安装依赖：@babel/core、babel-loader、@babel/preset-env、@babel/preset-react、@babel/preset-typescript
• 新建babel.config.json配置preset
• webpack中用babel-loader替代ts-loader（或两者配合）处理脚本文件

示例Babel配置：

{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.25%, not dead" }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

Webpack规则示例：

{
  test: /\.([jt]sx?)$/,
  exclude: /(node_modules|\.webpack)/,
  use: 'babel-loader'
}

选择建议 #

如果项目没有特殊Babel需求，优先选方案一，配置更简洁，无需维护两套编译配置；若需利用Babel的插件或灵活编译控制，再考虑方案二。

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