《十二》Babel 和 TypeScript 结合使用

TS 可以通过 target 配置选项来指定 TS 被编译为的 JS 的版本，但无法保证能具体运行到哪些浏览器的哪些版本中；通过 babel 可以指定要兼容的目标浏览器。

Babel 是一个 JavaScript 编译器。主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

接上一章《使用 Webpack 打包 TypeScript 代码》。

1. 执行 npm i -D @babel/core @babel/preset-env babel-loader core-js 安装 babel 相关的包。

   @babel/core：babel 的核心包。
   @babel/preset-env：babel 预先设置的环境。
   babel-loader：将 babel 与 webpack 进行结合的工具。
   core-js：模拟 JS 的运行环境。

2. 修改 webpack.config.js 配置文件。

   module.exports = {
   	...
   	module: {
   		rules: [
   			{
   				test: /\.ts$/,
   				// 加载器的执行顺序是从后往前：先用 ts-loader 将 TS 的代码转换成 JS 代码；然后再用 babel 将新版本的 JS 转换成能运行在指定浏览器中的旧版本的 JS
   				// 可以直接指定加载器，也可以对加载器进行配置
   				use: [
   				     // 对加载器进行配置
   					{
   						// 指定加载器
   						loader: "babel-loader",
   						options: {
   							// 设置预定义的环境
   							preset: [
   								[
   									// 指定环境的插件
   									"@babel/preset-env",
   									// 配置信息
   									{
   										// 要兼容的目标浏览器
   										targets: {
   											"chrome": "58",
   											“ie": "11"
   										},
   										// 指定 corejs 的版本
   										"corejs": "3",
   										// 使用 corejs 的方式：usage 表示按需加载
   										"useBuiltIns": "usage",
   									}
   								],
   							]
   						},
   					},
   					// 直接指定加载器
   					"ts-loader"
   				],
   				exclude: /node_mudules/
   			}
   		]
   	},
   }