Babel简单来说就是个JavaScript编译器，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的 JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出来了几个主要功能：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill模块)
- 源码转换 (codemods)
运行命令安装所需的包：
yarn add -D @babel/core @babel/preset-env @babel/preset-react
yarn add -D @babel/polyfill
需要注意的是从Babel7开始，都是以 @babel 作为冠名的。
- @babel/core 是Babel的核心库。
- @babel/preset-env 是一组预设的插件组，包含了一组相关的插件，Bable中是通过各种插件来指导如何进行代码转换。
- @babel/preset-react 指导Babel如何转换React。
- @babel/polyfill 模块包括 core-js和一个自定义的 regenerator runtime模块用于模拟完整的 ES2015+ 环境。所以@babel/polyfill适用于应用程序，而对于做工具的朋友可能仅仅需要模拟部分功能，则可以直接从core.js中获取。
根目录创建babel.config.js配置文件：
const presets = [
[
"@babel/env",
{
useBuiltIns: "usage",
},
],
["@babel/preset-react"]
];
module.exports = {
presets
};
对于 Babel 编译我们需要指定对应的浏览器版本，我们可以在 Babel 所属的配置文件中指定，但这不通用，因为还有很多别的插件也会使用到这一浏览器版本配置。所以，正常我们通过 package.json 或者新建 .browserslistrc 文件来指定。
.browserslistrc
[production]
>0.2%
not dead
not op_mini all
[development]
last 1 chrome version
last 1 firefox version
last 1 safari version
配置中区分了生产和开发环境。语法可以参考browserslist，useBuiltIns则会根据需要选择性的添加polyfill。
完成以上工作后，执行编译会弹出如下警告：
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.
You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:
npm install --save core-js@2 npm install --save core-js@3
yarn add core-js@2 yarn add core-js@3
看来需要显示指定corejs版本，我们通过命令yarn add -D @babel/runtime-corejs2安装后，再修改babel.config.js配置文件：
const presets = [
[
"@babel/preset-env",
{
targets: {
"browsers": ["last 2 versions", "> 0.2%", "maintained node versions", "not dead"],
},
useBuiltIns: "usage",
corejs: 2
},
],
["@babel/preset-react"]
];
module.exports = {
presets
};
再执行编译命令，警告消除。此处需要留意如果以后corejs版本更新可能需要更新对应的@babel/runtime-corejs2包。
关于创建的babel.config.js配置文件，需要说明一下。这是Babel7引入的新概念。可以让你能够采用编程的方式完成Babel配置，比如在开发与产品环境中区分不同的编译选项。当然如果只是需要一个简单的并且只用于单个软件包的配置，那也可以直接使用.babelrc。
插件顺序
Babel配置中的presets和plugins如果都将处理某段程序代码时，将按照以下顺序执行:
- 插件在 Presets 前运行。
- 插件顺序从前往后排列。
- Preset 顺序是从后往前。
由此可知，根据我们配置的presets可知，先执行@babel/preset-react，再执行@babel/preset-env。
TypeScript编译
在Bable7之前，我们编译ts,tsx文件需要借助Webpack中的类似ts-loader，awesome-typescript-loader来完成。Bable7推出了@babel/preset-typescript的预设，来完成ts,tsx文件的编译。
移除掉之前使用的awesome-typescript-loader
yarn remove awesome-typescript-loader
添加@babel/preset-typescript
yarn add -D @babel/preset-typescript
修改webpack.common.js，去除掉awesome-typescript-loader的相关配置。
module.exports = {
// 入口文件
entry: './src/index.tsx',
// 需要解析的文件后缀名
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
// 管理插件，通过插件实现增强功能
plugins: [
// 自动清理dist
new CleanWebpackPlugin(),
// 根据模板生成html
new HtmlWebpackPlugin({
title: 'My App',
template: './src/index.html'
}),
],
// 配置项目处理的不同文件及模块
module: {
rules: [
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
]
}
};
babel.config.js追加配置
const presets = [
[
"@babel/preset-env",
{
targets: {
"browsers": ["last 2 versions", "> 0.2%", "maintained node versions", "not dead"],
},
useBuiltIns: "usage",
corejs: 2
},
],
["@babel/preset-react"],
["@babel/preset-typescript"]
];
module.exports = {
presets
};
重新运行编译成功。