前端工做流

編譯

　　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運行。