本文将展示,如何使用 @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 个包需要下载安装,它们分别是: