阅读数:72 评论数:0

ES6是2015年发布的下一代javascript语言标准， 它引入的新的语法和API， 使我们编写js代码更加得心应手。比如class、let、for...of promise等等这样的， 但是可惜的是这些新特性只被最新版本的浏览器支持，但是低版本浏览器并不支持， 那么低版本浏览器下就需要一个转换工具， 把es6代码转换成浏览器能识别的代码， babel就是这样一个工具。

在Babel执行编译的过程中，会从项目的根目录下的.babelrc文件中读取配置，.babelrc是一个json格式的文件。

在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置。

babel-polyfill和babel-runtime及babel-plugin-transform-runtime

Babel默认只转换新的javascript语法， 而不转换新的API， 比如Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise等全局对象，以及一些在全局对象上的方法都不会转码。如果想让这上方法运行，必须使用babel-polyfill来转换等。

babel-polyfill的原理是当运行环境中并同有实现的一些方法，babel-polyfill会做兼容。它通过向全局对象和内置对象的prototype上添加方法秋实现的。

babel-runtime它是将es6编译成es5去执行。它不会污染全局对象和内置对象的原型，需要手动imprt，但会有很多冗余。

babel-plugin-transform-runtime可以避免手动import的痛苦， 并且它还做了公用方法的抽离。

presets

presets属性告诉Babel要转换的源码使用了哪些新的语法特性， presets是一组plugins的集合。

但是Babel团队为了方便，将同属ES2015几十个Transform Plugins集合到babel-preset-es2015一个Preset中，这样我们只需要在.babelrc的presets加入es2015一个配置就可以完成全部es2015语法的支持了。

于是babel-preset-env出现了， 它的功能类似于babel-preset-latest， 它会根据目标环境不支持的新特性来转译。在.babelrc配置文件中，可以如下简单的配置：

{
  "presets": ['env']
}

我们还可以仅仅配置项目所支持的浏览器的配置。

（1）targets

含义是支持一个运行环境的对象，比如支持的node版本，运行环境。

（2）modules

该参数的含义是：启动将ES6模块语法转换为另一种模块类型，将该设置为false就不需要转换模块。

以前我们需要使用babel来将es6的模块语法转换为AMD，CommonJS，UMD之类的模块化标准语法，但是现在webpack都帮我们做了这件事了，所以我们不需要babel来做，因此需要babel配置项中设置modules为false。

（3）babel-presets-stage-x

preset有两种，一种是按年份（babel-preset-es2017），一个是按阶段（babel-preset-stage-o）。目前有4个不同的阶段预设：

babel-preset-stage-0
 
babel-preset-stage-1
 
babel-preset-stage-2
 
babel-preset-stage-3

以上每种预设都依赖于紧随的后期阶段预设， 数字越小，阶段越靠后， 存在依赖关系。

stage0只是一个美好激进的想法，一些babel插件实现了对这些特性的支持，但是不确定是否会被定为标准。

stage1值得被纳为标准的特性。

stage2该特性规范已经被起草，将会被纳入标准里

stage3该特性规范已经定稿，大浏览器厂商和Node.js社区已开始着手实现。

在webpack中配置babel

由于babel所做的事情是转换代码，所以需要使用loader去转换，因此我们需要配置babel-loader。

在安装babel-loader之前，我们需要安装babel-core，因此babel-core是Babel编译器的核心，然后安装 babel-loader，接着我们需要安装babel-preset-env, babel-plugin-transform-runtime, babel-preset-stage-2.

通过babel-plugin-transform-vue-jsx来编译jsx。