使用bable首先必装的几个插件：npm i babel-loader @babel/core @babel/preset-env webpack webpack-cli -D

@babel/preset-env使用

此babel插件内部已集成了babel6.x时的部分插件，能根据运行环境为代码做相应编译，通过browserslist或targets选项解析需要支持的目标环境，根据环境将源代码转译为目标代码。

此外，@babel/preset-env不包含state-x的一些插件，只支持state-4的js语法。

相较babel6.x版本,此插件的一大特点是通过配置useBuiltIns选项可替换@babel/plugin-transform-runtime的使用。

主要配置

• targets，设置支持环境

{
        "presets": [ //执行顺序：倒序， 从最后一项开始执行
            ["@babel/env", {
                "targets": {
                //只支持在市场中占比大于1%份额的浏览器，主流浏览器的最后两个版本
                    "browsers": ["> 1%","last 2 versions", "not dead"] 
                }
            }]
        ]
    }

其中设置浏览器的支持环境也可以在package.json中设置browserslist选项，其优先级为targets.browsers > package.json/browserslist

//package.json
    {
        "browserslist": [
            "> 1%",
            "last 2 versions",
            "not dead"
        ]
    }

• modules, 设置模块转化规则

该选项默认为commonjs，即，在编译过程中会将ES6的important转为require 建议将该选项设置为false，这样设置表示模块的转化将交由webpack来处理，通过其TreeShaking特性将有效减少打包出来的JS文件体积。

• useBuiltIns, 这是配置是处理polyfill的关键

该选项默认为false，表示不对polyfill做处理。当使用ES6+语法及API时，在不支持的环境下会报错。在这种情况下需要通过其他插件来做处理。

关于@babel/preset-stage-x的使用说明

stage的包含顺序如下所示：左边包含右边的全部特性，即stage-0包含右边stage-1、stage-2、stage-3、stage-4的所有插件
    stage-0 > ~1 > ~2 > ~3 > ~4

此插件和@babel/preset-env的区别：@babel-preset会根据预设的浏览器兼容列表从stage-4中选取必须的plugin，也就是说，如不引入stage-x，@babel/preset-env将只支持到stage-4。

• 建议
  • 如果是react用户，建议配到@babel/stage-0
  • 通常使用建议配到@babel/stage-2

关于babel的使用可参考以下两篇文章：

文章一 文章二

//.babelrc配置文件
//使用@babel/polyfill和@babel/plugin-transform-runtime，这两个是互斥的。目的都是为了解决下一代js语法浏览器兼容性。
//一般我们写业务的时候，建议使用@babel/polyfill，而在编写组件库的时候，
//则使用@babel/plugin-transform-runtime
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                },
                "useBuiltIns": "useage"
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": false,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

        }<br />        ]<br />    ]<br />}