babel的使用及babel与gulp结合工做流

Babel 经过语法转换器支持最新版本的 JavaScript 。 它有很是多的插件，这些插件可以容许咱们马上使用新语法，无需等待浏览器支持。
那咱们怎么使用babel呢？
首先咱们来了解babel基本的安装
第一：babel的安装

第二：查看babel版本以及babel命令

第三步：创建文件夹，初始化一个仓库，将咱们的配置写成一个package.json文件。

第四步：新建一个文件，并单独输出其编译以后的文件，这是单个文件的监听。

第五步：新建文件夹，将以前所建的test.js文件移动到文件夹内，删除以前监听的输出后的单个文件，再进行文件夹的监听。

如今整个工程目录以下

第六步：当咱们工程中须要使用babel的时候，咱们使用 cnpm install babel-cli --save-dev来进行安装，当前项目依赖babel-cli。

咱们可使用babel-node去运行文件

接下来咱们来看看babel如何来解析ES6/ES7的语法。
第一步：建立.babelrc文件，在文件中写入

第二步：下载相关的preset,并将babel去作一个监听，将src目录下的项目编译到dist目录下。

在文件中写入

使用

能够看到这个编译以后的代码

编译以前代码以下

经过代码能够看到其实编译出来的代码并不精简
咱们能够经过安装
再在.babelrc里面进行修改
经过运行

查看编译以后的结果，比以前的精简许多。

若是咱们想babel还能够编译es2016的话，咱们能够继续安装preset

要记得修改.babelrc文件。

若是想将gulp和babel结合使用完成一整套的工做流程，该怎么作呢？
第一步：安装gulp插件，删掉以前输出编译以后文件的dist目录

第二步：创建gulpfile.js，文件，写入配置，运行。




很想把完整的demo也给你们看，已经上传到github了：https://github.com/JserJser/reactDemo/tree/master/babel-cli/babel-demos