webpack、gulp、rollup、tsc/babel 使用對比

本文檔主要介紹四種工具的特色， 包括優勢、缺點、 輸入、輸出、可以處理的文件類型，針對不一樣文件類型的處理方式， 以及其適用場景。

Rollup

簡介

Rollup 是一個模塊打包工具, 能夠將咱們按照 ESM (ES2015 Module) 規範編寫的源碼構建輸出以下格式:

• IIFE: 自執行函數, 可經過 <script> 標籤加載
• AMD: 經過 RequireJS 加載
• CommonJS: Node 默認的模塊規範, 可經過 Webpack 加載
• UMD: 兼容 IIFE, AMD, CJS 三種模塊規範
• ESM: ES2015 Module 規範, 可用 Webpack, Rollup 加載

優勢：

支持動態導入。

支持tree shaking。僅加載模塊裏用獲得的函數以減少文件大小。

Scope Hoisting。 rollup能夠將全部小文件生成到一個大文件中，全部代碼都在同一個函數做用域裏:， 不會像 Webpack 那樣用不少函數來包裝模塊。

沒有其餘冗餘代碼, 執行很快。除了必要的 cjs, umd 頭外，bundle 代碼基本和源碼差很少，也沒有奇怪的 __webpack_require__, Object.defineProperty 之類的東西,

缺點：

不支持熱更新功能；對於commonjs模塊，須要額外的插件將其轉化爲es2015供rollup 處理；沒法進行公共代碼拆分。

輸入：

options.input  單/多文件入口點

輸出：

rollup支持生成 iife、cjs、amd 、esm、umd格式的文件； 單/多js文件輸出

文件資源處理： 

rollup 經過插件來編譯處理各種靜態資源：

• rollup-plugin-typescript2
• rollup-plugin-babel
• rollup-plugin-uglify
• rollup-plugin-commonjs
• rollup-plugin-postcss
• rollup-plugin-img
• rollup-plugin-json

基本使用參考

 http://www.javashuo.com/article/p-zwdophsv-dz.html

適用場景：

由純js開發的第三方庫； 須要生成單一的umd文件的場景

案例：

純js/ts編寫的第三方庫：

React、Vue

UI組件庫 evergreen

使用 babel 將 js/ts 編譯成  esm 和 cjs 格式的模塊文件， 使用 rollup 將庫打包成  umd 格式的 evergreen.min.js 和 evergreen.js ,  打包出來的代碼比較乾淨。

gulp

簡介

前端構建工具，gulp是基於Nodejs，自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

gulp基於流式操做，經過各類 Transform Stream 來實現文件不斷處理 輸出。

優勢：

gulp文檔簡單，學習成本低，使用簡單；對大量源文件能夠進行流式處理，藉助插件，能夠對文件類型進行多種操做處理。

缺點：

不支持tree-shaking、熱更新、代碼分割等。 gulp 對 js 模塊化方案無能爲力，只是對靜態資源作流式處理，處理以後並未作有效的優化整合。

輸入：

輸入（gulp.src） js，ts，scss，less 等源文件

輸出：

對輸入源文件依次執行打包（bundle）、編譯（compile）、壓縮、重命名等處理後輸出（gulp.dest）到指定目錄中去

適用場景：

靜態資源密集操做型場景，主要用於css、圖片等靜態資源的處理操做。

文件處理：

gulp經過各類中間件處理靜態資源的編譯：

• gulp-load-plugins：自動加載 package.json 中的 gulp 插件
• gulp-rename： 重命名
• gulp-uglify：文件壓縮
• gulp-concat：文件合併
• gulp-less：編譯 less
• gulp-sass：編譯 sass
• gulp-clean-css：壓縮 CSS 文件
• gulp-htmlmin：壓縮 HTML 文件
• gulp-babel: 使用 babel 編譯 JS 文件
• gulp-jshint：jshint 檢查
• gulp-imagemin：壓縮jpg、png、gif等圖片
• gulp-livereload：當代碼變化時，它能夠幫咱們自動刷新頁面

案例：

antd

gulp + webpack + tsc / babel

gulp的做用主要是打包流程管理， 拷貝文件(less/ts/ts類型聲明文件)，處理less， 拷貝並轉譯less 爲css。

tsc及babel 則用於轉譯 靜態ts文件, 逐個輸出到指定目錄es/lib目錄下

webpack主要用於模塊化處理，將打包後的模塊編譯到 dist下的  antd.js   antd.min.js 以及及其餘css文件等。

Webpack

簡介：

Webpack 是一種前端資源模塊化 管理和打包 工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分割，等到實際須要的時候再異步加載。

優勢：

基本以前gulp 能夠進行的操做處理，如今webpack也均可以作。同時支持熱更新，支持tree shaking 、Scope Hoisting、動態加載、代碼拆分、文件指紋、代碼壓縮、靜態資源處理等，支持多種打包方式。（優勢有不少，在這不作過多贅述）

缺點：

不支持 打包出esm格式的代碼 (打包後的代碼再次被引用時tree shaking 困難)， 打包後亢餘代碼多，配置較爲複雜。

輸入：

入口文件 js/ts

輸出：

js、css、 img等靜態資源文件

適用場景：

應用程序開發

案例：

react-bootstrap

react-bootstrap 使用babel進行tsx文件的編譯，而且按照原有目錄輸出到 lib esm/cjs目錄下；

同時使用shell 工具 拷貝 TS類型聲明文件 到對應目錄；

對於umd文件，則採用webpack打包生成了  react-bootstrap.min.js 及 react-bootstrap.js 輸出到dist下。

打包umd方式很是簡單，但文件中保留了許多webpack使用的到的冗餘代碼。生成效果不如上述 的 evergreen 純淨。

tsc / babel

簡介

tsc/babel 能夠將 ts 代碼編譯 js 代碼。支持編譯成 esm、cjs、amd 格式的文件

優勢：

編譯速度快，能夠保留原有的目錄相對位置，分目錄保存各模塊的代碼，便於按需引用加載；

缺點：

只對語言自己進行編譯轉換，不支持tree shaking 等高級功能。

輸入:

ts/js 文件

輸出：

ts/ts對應的js文件，且一一對應

案例分析：

tsc/babel常與其餘工具配合使用

打包使用方式推薦

第三方js類庫：

1.  rollup + 插件 （推薦）
2.  babel/tsc + uglifyjs
3.  webpack

UI類庫開發(按需加載)

生成esm   tsc/babel  + gulp

生成cjs     tsc/babel + gulp

生成umd   rollup （js + css的合併文件）

開發應用程序

webpack + loader + plugin

上述打包方式各有其特色，根據當前需求及開發便利，酌情選擇打包編譯方式。