編譯

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

轉載于:https://www.cnblogs.com/websjs/p/9242232.html

總結

以上是生活随笔為你收集整理的前端工作流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。