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
基本使用參考
https://www.cnblogs.com/tugenhua0707/p/8179686.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 使用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類庫：
- rollup + 插件 （推薦）
- babel/tsc + uglifyjs
- webpack
UI類庫開發(按需加載)
生成esm tsc/babel + gulp
生成cjs tsc/babel + gulp
生成umd rollup （js + css的合並文件）
開發應用程序
webpack + loader + plugin
上述打包方式各有其特點，根據當前需求及開發便利，酌情選擇打包編譯方式。