構建工具對比
| 名稱 | 簡介 | 優(yōu)點 | 缺點 | 應用場景 |
|---|---|---|---|---|
| webpack | 一種前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載 | 模塊化、靜態(tài)資源整合、公共代碼拆分、異步加載、熱更新等等 | 1. 配置復雜 2. 冗余代碼較多 3. 不支持輸出esm格式的bundle |
應用程序開發(fā) |
| rollup | 一個模塊打包工具, 可以將我們按照 ESM (ES2015 Module) 規(guī)范編寫的源碼構建輸出如下格式: iife: 自執(zhí)行函數, 可通過 <script> 標簽加載 amd: 通過 RequireJS 加載 cjs: Node 默認的模塊規(guī)范, 可通過 Webpack 加載 umd: 兼容 IIFE, AMD, CJS 三種模塊規(guī)范 esm: ES2015 Module 規(guī)范, 可用 Webpack, Rollup 加載 |
1. 基于ES6，支持動態(tài)導入、tree shaking 2. 可以將所有小文件打到一個bundle里，所有代碼都在同一個函數作用域中，不壓縮混淆的情況下代碼依舊可讀 3. 冗余代碼少，執(zhí)行快 |
1. 不支持熱更新（可以通過livereload插件實現(xiàn)） 2. 對于commonjs模塊，需要用rollup-plugin-commonjs插件讀成ES6代碼后再處理 3. umd和iife格式無法對公共代碼進行拆分，因為自執(zhí)行函數會把所有的模塊都放到一個函數中，并沒有像webpack一樣有一些引導代碼，所以沒有辦法做到代碼拆分 |
框架、組件庫、生成單一umd文件的場景 |
| gulp | 借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單，基于流式操作，通過各種 Transform Stream 來實現(xiàn)文件不斷處理 輸出 | 1. 文檔簡單，學習成本低 2. 借助插件，可以對大量源文件進行流式處理，可以對文件類型進行多種操作處理 |
1. 不支持tree shaking、熱更新、公共代碼拆分 2. 無法進行js模塊化，只是對靜態(tài)資源進行流式處理和整合 |
靜態(tài)資源密集型場景，如css、img等靜態(tài)資源整合 |
感受下 Element-ui 的 gulpfile.js
'use strict';
const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
function compile() {
return src('./src/*.scss')
.pipe(sass.sync())
.pipe(autoprefixer({
browsers: ['ie > 9', 'last 2 versions'],
cascade: false
}))
.pipe(cssmin())
.pipe(dest('./lib'));
}
function copyfont() {
return src('./src/fonts/**')
.pipe(cssmin())
.pipe(dest('./lib/fonts'));
}
exports.build = series(compile, copyfont);
