Babel 兼容处理TypeScript 可以把代码编译成 JavaScript但如果需要兼容更多浏览器还可能需要使用 Babel 转换语法并补充运行时能力。一、为什么需要 BabelTypeScript 的target主要控制部分语法的编译目标。实际项目还可能需要把现代 JavaScript 语法转换为旧浏览器支持的语法。根据目标浏览器生成兼容代码。按需引入部分运行时垫片。Babel 可以和 Webpack 一起工作对 TypeScript 编译结果进行进一步处理。二、TypeScript、Webpack 和 Babel 的分工TypeScript 源代码 ↓ ts-loader类型检查并转换为 JavaScript ↓ babel-loader根据目标浏览器转换 JavaScript ↓ Webpack分析依赖并打包 ↓ 浏览器加载 bundle.js可以这样理解工具主要职责TypeScript类型系统和类型检查ts-loader在 Webpack 中处理 TypeScriptBabel转换 JavaScript 语法并处理兼容性babel-loader在 Webpack 中接入 BabelWebpack打包模块和资源core-js提供部分新 API 的兼容实现Babel 不负责完整的 TypeScript 类型检查类型检查仍然应该由 TypeScript 或ts-loader完成。三、安装 Babel 依赖在已经配置好 Webpack 和 TypeScript 的项目中安装npminstall--save-dev babel/core babel/preset-env babel-loadernpminstallcore-js依赖作用依赖作用babel/coreBabel 核心工具babel/preset-env根据目标环境转换语法babel-loader在 Webpack 中调用 Babelcore-js提供 JavaScript 标准库的兼容实现如果项目希望把运行时依赖统一写入开发依赖也可以根据项目构建策略调整安装位置。关键是确保构建环境和发布环境都能找到所需的core-js。四、配置 babel-loader在 Webpack 的module.rules中配置module:{rules:[{test:/\.ts$/,use:[{loader:babel-loader,options:{presets:[[babel/preset-env,{targets:{chrome:58,ie:11},corejs:3,useBuiltIns:usage}]]}},{loader:ts-loader}],exclude:/node_modules/}]}五、Loader 的执行顺序Webpack 的多个 loader 通常按照从右到左的顺序处理TypeScript 文件 ↓ ts-loader ↓ babel-loader ↓ JavaScript 文件上面的数组中ts-loader写在右侧因此先处理 TypeScriptbabel-loader再处理转换后的 JavaScript。六、targetstargets用于指定需要兼容的浏览器targets:{chrome:58,ie:11}目标浏览器越旧Babel 需要转换的语法通常越多。实际项目应该根据用户群体和浏览器支持范围设置目标不要盲目兼容所有旧浏览器。七、corejs 和 useBuiltInscorejs用于指定兼容库版本corejs:3useBuiltIns: usage表示根据代码使用情况按需引入兼容能力{corejs:3,useBuiltIns:usage}使用这些配置时需要确保项目中安装了对应版本的core-js。八、完整的 Webpack 配置示例constpathrequire(path);constHtmlWebpackPluginrequire(html-webpack-plugin);module.exports{mode:development,entry:./src/index.ts,output:{path:path.resolve(__dirname,dist),filename:bundle.js},resolve:{extensions:[.ts,.js]},module:{rules:[{test:/\.ts$/,use:[{loader:babel-loader,options:{presets:[[babel/preset-env,{targets:{chrome:58,ie:11},corejs:3,useBuiltIns:usage}]]}},{loader:ts-loader}],exclude:/node_modules/}]},plugins:[newHtmlWebpackPlugin({title:TypeScript Babel 测试})]};九、Babel 配置文件写法除了把配置写在webpack.config.js中也可以单独创建babel.config.json{presets:[[babel/preset-env,{targets:{chrome:58,ie:11},corejs:3,useBuiltIns:usage}]]}Webpack 配置可以简化为{loader:babel-loader}配置集中管理后更容易在不同构建环境之间复用。十、常见问题1. Babel 处理了代码但没有类型检查这是正常现象。Babel 的主要任务是语法转换不应把它当成 TypeScript 类型检查器。项目仍然需要执行tsc --noEmit或通过ts-loader检查类型。2. core-js 找不到检查是否安装npminstallcore-js并确认corejs配置版本和安装版本一致。3. 兼容配置过度兼容过多旧浏览器会增加构建体积和转换时间。应该根据实际用户环境设置targets。4. Loader 顺序配置错误如果希望先处理 TypeScript再进行 Babel 转换应把ts-loader放在 loader 数组右侧把babel-loader放在左侧。十一、本章小结TypeScript 负责类型检查和基础编译。Babel 负责根据目标环境转换 JavaScript。Webpack 通过babel-loader接入 Babel。targets决定需要兼容哪些浏览器。core-js和useBuiltIns用于处理部分运行时兼容能力。Babel 不能替代 TypeScript 类型检查。