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

来源：oschina

链接：https://my.oschina.net/u/4384474/blog/3866393