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
};

重新运行编译成功。