TypeScript 中 Webpack 怎么配置 babel-loader 转换高版本语法-js教程-PHP中文网

核心目标是语法剥离与降级而非类型检查：babel-loader 通过 @babel/preset-typescript 剥离类型注解，再由 @babel/preset-env 按 browserslist 降级语法并按需注入 polyfill，跳过类型检查，构建更快。

typescript 中 webpack 怎么配置 babel-loader 转换高版本语法

Webpack 中用 babel-loader 处理 TypeScript 文件，核心目标不是类型检查，而是把 TypeScript 编译后的 JS（含 ES2020+ 语法、可选链、空值合并等）进一步降级为兼容目标环境的代码。它跳过 TS 类型系统，只做语法剥离 + 语法转译，适合构建速度优先、类型检查交给 IDE 或独立进程的场景。

基础配置：只用 babel-loader 处理 .ts/.tsx

无需 ts-loader，直接让 babel-loader 接管 TS 文件：

安装必要依赖：npm i -D @babel/core @babel/preset-env @babel/preset-typescript

在 webpack.config.js 的 rules 中添加：

module: {
  rules: [{
    test: /\.tsx?$/,
    use: 'babel-loader',
    exclude: /node_modules/
  }]
}

确保 resolve.extensions 包含 '.ts' 和 '.tsx'，否则 import './foo' 无法自动匹配 TS 文件

关键配套：.babelrc 或 babel.config.js

仅靠 loader 不会生效，必须配好 Babel 预设：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

创建 .babelrc（根目录）：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-typescript", { "allowDeclareFields": true }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3,
      "regenerator": true
    }]
  ]
}

@babel/preset-env 负责语法降级，依赖 browserslist 字段决定编译目标
@babel/preset-typescript 剥离类型注解、接口、泛型等，不校验类型，速度快

补充要点：TS 类型检查与 polyfill

这种方案默认不做类型检查，也不自动注入运行时垫片：

类型检查需单独运行 tsc --noEmit 或搭配 fork-ts-checker-webpack-plugin
Polyfill 行为由 @babel/preset-env 的 useBuiltIns: "usage" 控制，需同时配 core-js 和 browserslist
若项目中用了 Array.prototype.flat 等新 API，且目标浏览器不支持，必须引入 core-js/stable 并开启 useBuiltIns

和 ts-loader 混用？不推荐直接串联

虽然技术上可以写成 [babel-loader, ts-loader]，但语义冲突：

ts-loader 默认已将 TS 编译为 ES2017+ JS，再交由 babel-loader 处理是冗余的
若坚持混用，务必开启 ts-loader 的 transpileOnly: true，并关闭 babel-loader 对 .ts 的处理，避免重复编译
更合理的分工是：ts-loader 负责类型检查 + 初步转译，babel-loader 专攻语法降级 + polyfill 注入