在webpack中编写JavaScript代码时，可以使用最新的ES语法。最后打包时，webpack会使用Babel将ES6+语法转换成目标浏览器中可执行的ES5语法。所以Babel是一个需要掌握的重要知识点。什么是BabelBabel是一个JavaScript编译器。通过Babel，我们可以轻松地将自己编写的最新的ES语法代码转换成任意版本的JavaScript语法。随着浏览器逐渐支持ES标准，我们不需要改动代码，只需要修改Babel配置即可适应新的浏览器。例如下面是ES6箭头函数语法的代码：[1,2,3].map(n=>n**2);经过Babel处理后，可以转化为正常的ES5语法：[1,2,3].map(function(n){returnMath.pow(n,2);});Babel初体验下面介绍一下Babel的安装、功能和配置文件。1、使用babel-cli命令行工具Babel本身有一个CLI（Command-LineInterface，命令行界面）工具，可以单独安装使用。下面我们在我们的项目中安装@babel/cli和@babel/core。npmi-D@babel/core@babel/cli然后创建一个babel.js文件：//babel.js[1,2,3].map(n=>n**2);然后执行npxbabelbabel。js，你会看到输出的内容。这个时候你可能会看到输出的内容和源文件的内容没什么区别。这是因为没有添加转换规则。在下面安装@babel/preset-env。然后在执行CLI时添加--presets标志：//Installpreset-envnpmi-D@babel/preset-env//执行CLI并添加--presetsnpxbabelbabel.js--presets=@babel/preset-env最终输出代码是转ES5后的代码：'usestrict'[1,2,3].map(function(n){returnMath.pow(n,2);});如果要将结果输出到固定文件，可以使用--out-file或-o参数：npxbabelbabel.js-ooutput.js。Tips：Babel7使用@babel命名空间来区分官方包，所以之前的官方包babel-xxx已经改为@babel/xxx。2.配置文件Babel除了可以使用命令行来配置flags，还支持配置文件。配置文件有两种：使用package.json的babel属性；在项目根目录中创建一个单独的.babelrc或.babelrc.js文件。示例如下：//package.json{'name':'my-package','version':'1.0.0','babel':{'presets':['@babel/preset-env']}}//.babelrc{'presets':['@babel/preset-env']}Babel将在被转义文件的当前目录中查找.babelrc文件。如果它不存在，它会向外遍历目录树，直到找到一个.babelrc文件，或者一个包含"babel":{}的package.json文件。3.envoptions如果我们想在不同的环境下使用不同的Babel配置，可以在配置文件中添加env选项：{'env':{'production':{'presets':['@babel/preset-env']}}}env选项的值将从process.env.BABEL_ENV或process.env.NODE_ENV中获取（如果它不可用）或“development”（如果不可用）。强大的插件系统支持Babel的插件和PresetBabel的语法转换。Babel的插件分为两类：转换插件和解析插件。不同的语法对应不同的转换插件。比如我们要将箭头函数转成ES5函数写法，可以单独安装@babel/plugin-transform-arrow-functions插件。转换插件的主要职责是进行语法转换，而解析插件则对语法进行扩展。比如我们要解析jsx等React设计的特殊语法，就需要相应的jsx插件。如果不想一一添加插件，可以使用插件组合预设（pluginpreset，插件组合更容易理解），最常用的预设是@babel/preset-env。之前的预设是按照TC39提案的阶段划分的。例如，参见babel-preset-stage-1代表。此插件组合包含一组支持TC39
