Babel

babel是一个javascript转译器，浏览器的发展速度赶不上javascript的发展速度，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式

babel-loader和babel-core版本不对应所产生的，
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

//@这个符号，只有babel7才特有的，babel6没有
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

@babel/core
Babel 的核心功能在@babel/core模块。
@babel/cli
@babel/cli是一个允许你从终端使用 babel 的工具
@babel/preset-env
插件包，babel-preset-env 等效于三个插件包（babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 ）
@babel/polyfill
一个填补功能的工具，用来支持一些babel本身不能直接支持的新的API。
配置文件.babelrc/babel.config.js
之前版本的babel都是使用.baberc来做配置文件，babel7引入了babel.config.js。但是它并不是.baberc的替代品，二者根据使用的场景不同自行选择。
babel 配置的第一种配置方式.babelrc

{
  "presets": ["@babel/env"],//presets用于配置我们所需要的转译器
  "plugins": []//plugins用于配置我们转译所需要的插件
}

babel 配置的第二种配置方式babel.config.js

module.exports = {
    presets: [ "@babel/env" ],
    plugins: []
}
//或
module.exports = function (api) {
    api.cache(true);
    const presets = [ 
        ["@babel/env", {
              "targets": { //指定要转译到哪个环境
                  //浏览器环境
                  "browsers": ["last 2 versions", "safari >= 7"]
                  
              }
       }]
   ];
    return {
      presets
    };
  }

webpack里面使用babel，除需要配置之外，还需要：

 module: {
      rules: [
        {test: /\.(js|jsx)$/, use: 'babel-loader',exclude: /node_modules/}
      ]
    }

其他
在 2015 年之前 ES3 是主流。
ES2015 =》 ES6(ES6是在2015年发布的)
ES2016 =》 ES7
ES2017 =》 ES8

es2015 => babel-preset-es2015 (可以将 es6 的 JS 代码编译为 es5)
es2016 => babel-preset-es2016 (可以将 es7 的 JS 代码编译为 es6)
es2017 => babel-preset-es2017 (可以将 es8 的 JS 代码编译为 es7)

stage-x => babel-preset-stage-x (可以将处于某一阶段的js语法编译为正式版本的js代码)
这里再介绍下 stage-x， 提案共分为五个阶段：
stage-0: 稻草人-只是一个大胆的想法
stage-1: 提案-初步尝试
stage-2: 初稿-完成初步规范
stage-3: 候选-完成规范和浏览器初步实现
stage-4: 完成-将被添加到下一年发布

当前 babel 推荐使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范围更广，包含es2015 es2016 es2017的所有语法编译，并且它可以根据项目运行平台的支持情况自行选择编译版本。