前言

虽然es的版本在不断升级，但是目标浏览器可能并不支持，所以诞生了babel，他的主要作用就是转义为更低版本的es5。当然作用不仅仅是这些。

babel

概念

Babel 是 JavaScript 的编译器，通过 Babel 可以将我们写的最新 ES 语法的代码轻松转换成任意版本的 JavaScript 语法。随着浏览器逐步支持 ES 标准，我们不需要改变代码，只需要修改 Babel 配置即可以适配新的浏览器。

使用

可以使用babel-cli进行使用，定义输入文件以及输出文件。

Babel 本身自己带有 CLI（Command-Line Interface，命令行界面） 工具，可以单独安装使用。下面我们在项目中安装 @babel/cli 和 @babel/core。

  1. npm i -D @babel/core @babel/cli

然后创建一个babel.js文件：

// babel.js
[1, 2, 3].map(n => n ** 2);

然后执行npx babel babel.js，则会看到输出的内容，此时可能会看到输出的内容跟源文件内容没有区别，这是因为没有加转换规则，下面安装@babel/preset-env。然后执行 CLI 的时候添加 --presets flag：

# 安装 preset-env
npm i -D @babel/preset-env
# 执行 CLI 添加--presets
npx babel babel.js --presets=@babel/preset-env

最终输出的代码就是转换为 ES5 的代码了：

'use strict';
[1, 2, 3].map(function(n) {
    return Math.pow(n, 2);

配置

  • 使用package.json的babel属性；
  • 在项目根目录单独创建.babelrc或者.babelrc.js文件。

寻找文件的机制：
Babel会在正在被转义的文件当前目录中查找一个 .babelrc 文件。 如果不存在，它会向外层目录遍历目录树，直到找到一个 .babelrc 文件，或一个 package.json 文件中有 "babel": {} 。

基于不同环境设定不同的配置：

如果我们希望在不同的环境中使用不同的 Babel 配置，那么可以在配置文件中添加env选项：

{
  "env": {
    "production": {
      "presets": ["@babel/preset-env"]
    }
  }
}

env 选项的值将从 process.env.BABEL_ENV 获取，如果没有的话，则获取 process.env.NODE_ENV 的值，它也无法获取时会设置为 "development"。

preset说明

babel插件包括转移插件和语法插件，但因为插件太多不方便配置，因此官方提出了preset的方案。直接使用就可以缺省的配置大量的插件。

最常见的 preset 是@babel/preset-env。之前的preset是按照TC39提案阶段来分的，比如看到babel-preset-stage-1代表，这个插件组合里面是支持 TC39 Stage-1 阶段的转换插件集合。

现在的方案是更加符合使用规则的，useBuiltIns和target是最重要的两个，useBuiltIns用来设置浏览器 polyfill，target是为了目标浏览器或者对应的环境（browser/node）。

webpack中使用babel

通过上面的内容，我们已经掌握了 Babel 的基本用法，下面在 webpack 中使用 Babel 就变得很简单了，首先安装 npm 依赖，然后修改 webpack.config.js。
安装依赖包：

# 安装开发依赖
npm i webpack babel-loader webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
# 将 runtime 作为依赖
npm i @babel/runtime -S

第二步创建webpack.config.js文件，内容如下：

// webpack.config.js
module.exports = {
    entry: './babel.js',
    mode: 'development',
    devtool: false,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            }
        ]
    }
};

上面的webpack.config.js文件直接将 Babel 的配置写到了options中，还可以在项目根目录下创建.babelrc或者使用package.json的 babel 字段。