配置babel_Babel 7 下配置 TypeScript 支持

本文将展示，如何使用 @babel/preset-typescript 和 @babel/preset-env 配置一个最小但完整的编译环境，打包工具使用 webpack@4.41.2

插件集 preset-typescript

preset-typescript 是 Babel 提供的预设插件集之一，Babel 官方对其有一篇简短的介绍：

https://babeljs.io/docs/en/babel-preset-typescript

其中仅包含插件：@babel/plugin-transform-typescript

顾名思义，它的作用是转换 TypeScript 代码。

插件集 preset-env

preset-env 也是 Babel 提供的预设插件集之一，它可以将 ES6 转换为 ES5。preset-env 对于插件的选择是基于某些开源项目的，比如 browserslist、compat-table 以及 electron-to-chromium。我们常用 .browserslistrc 来设置我们预想满足的目标运行环境，如：

> 0.25%
not dead

这里不详细展开 browserslist 的使用，有时间会专门写一篇文章。我现在要详细说的是 preset-env 的重要配置之一：useBuiltIns。

useBuiltIns 从其名字来说是“使用内置”，“内置”的什么呢？从官方看来是“polyfills”。它的取值可以是以下三种：

1） false：

不使用内置的“polyfills”，这意味着你需要自行解决必要的“polyfills”问题。

2） "entry"：

只在“入口模块”处导入“polyfills”，你需要“根模块”写上import "core-js" 和 import "regenerator-runtime/runtime"，babel 会自动展开全部必要模块导入import "core-js/modules/X"，X 是根据你配置的目标环境选择出来的 polyfill，如es.string.pad-start、es.array.unscopables.flat。注意，如果你没有写import "core-js"，则不会展开任何导入（import）语句。

3） "usage"：

你不用写什么了，babel 会根据你配置的目标环境，在你使用到一些“ES6特性X”的时候，自动补充import "core-js/modules/X"。我觉得这是比较棒的选择！

另一个选项 corejs，指定的是使用的 corejs 的版本，corejs 需要你自己安装：

npm i -S core-js@2

或者

npm i -S core-js@3

corejs 只在 useBuiltIns 取值为 “entry” 或 “usage” 的时候有用，因为 Babel 所谓内置的 polyfills 工具就是 corejs。corejs 可以配置为 2 或 3。

安装 Babel 基础

有 5 个包需要下载安装，它们分别是：