前端工作流

编译

　　babel编译：必须配置 .babelrc文件

{
  "presets": [],
  "plugins": []
}

　　presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

　　然后写入.babelrc文件

{
  "presets": [
    "es2015","react"
  ]
}

　　Babel默认只编译Javascript新的语法（syntax），而不编译新的API，比如Promise、Maps、Set等全局对象。以及一些定义在全局对象上的方法，想要这些方法在浏览器运行，就必须用babel-folyfill插件，然后再脚本头部加入代码：

import 'babel-polyfill';
// 或者
require('babel-polyfill');

　　

模块打包

　　Babel只是将es6转为es5，但是依旧是CommonJs规范语法，里面的 require、exports是CommonJs里的变量，babel没有模块管理的功能。

　　模块管理的工具browserify、webpack等，browserify只打包js文件，如果是一个单页的话，可以用webpack，它可以把里面的资源全部打包，包括css、图片。

任务运行

　　编译和打包都可以通过命令行来完成，但是每次都用命令行太麻烦，自动化工具gulp、grunt。

　　编译和打包都是任务，那就可以把任务在gulp里定义，并通过gulp运行。