構(gòu)建工具對(duì)比
| 名稱(chēng) | 簡(jiǎn)介 | 優(yōu)點(diǎn) | 缺點(diǎn) | 應(yīng)用場(chǎng)景 |
|---|---|---|---|---|
| webpack | 一種前端資源模塊化管理和打包工具罕扎。它可以將許多松散的模塊按照依賴(lài)和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源咨跌。還可以將按需加載的模塊進(jìn)行代碼分割摹恰，等到實(shí)際需要的時(shí)候再異步加載 | 模塊化辫继、靜態(tài)資源整合、公共代碼拆分俗慈、異步加載姑宽、熱更新等等 | 1. 配置復(fù)雜 2. 冗余代碼較多 3. 不支持輸出esm格式的bundle |
應(yīng)用程序開(kāi)發(fā) |
| rollup | 一個(gè)模塊打包工具, 可以將我們按照 ESM (ES2015 Module) 規(guī)范編寫(xiě)的源碼構(gòu)建輸出如下格式: iife: 自執(zhí)行函數(shù), 可通過(guò) <script> 標(biāo)簽加載 amd: 通過(guò) RequireJS 加載 cjs: Node 默認(rèn)的模塊規(guī)范, 可通過(guò) Webpack 加載 umd: 兼容 IIFE, AMD, CJS 三種模塊規(guī)范 esm: ES2015 Module 規(guī)范, 可用 Webpack, Rollup 加載 |
1. 基于ES6，支持動(dòng)態(tài)導(dǎo)入闺阱、tree shaking 2. 可以將所有小文件打到一個(gè)bundle里炮车，所有代碼都在同一個(gè)函數(shù)作用域中，不壓縮混淆的情況下代碼依舊可讀 3. 冗余代碼少酣溃，執(zhí)行快 |
1. 不支持熱更新（可以通過(guò)livereload插件實(shí)現(xiàn)） 2. 對(duì)于commonjs模塊瘦穆，需要用rollup-plugin-commonjs插件讀成ES6代碼后再處理 3. umd和iife格式無(wú)法對(duì)公共代碼進(jìn)行拆分，因?yàn)樽詧?zhí)行函數(shù)會(huì)把所有的模塊都放到一個(gè)函數(shù)中赊豌，并沒(méi)有像webpack一樣有一些引導(dǎo)代碼扛或，所以沒(méi)有辦法做到代碼拆分 |
框架、組件庫(kù)碘饼、生成單一umd文件的場(chǎng)景 |
| gulp | 借鑒了Unix操作系統(tǒng)的管道（pipe）思想熙兔，前一級(jí)的輸出，直接變成后一級(jí)的輸入派昧，使得在操作上非常簡(jiǎn)單黔姜，基于流式操作，通過(guò)各種 Transform Stream 來(lái)實(shí)現(xiàn)文件不斷處理 輸出 | 1. 文檔簡(jiǎn)單蒂萎，學(xué)習(xí)成本低 2. 借助插件秆吵，可以對(duì)大量源文件進(jìn)行流式處理，可以對(duì)文件類(lèi)型進(jìn)行多種操作處理 |
1. 不支持tree shaking五慈、熱更新纳寂、公共代碼拆分 2. 無(wú)法進(jìn)行js模塊化主穗，只是對(duì)靜態(tài)資源進(jìn)行流式處理和整合 |
靜態(tài)資源密集型場(chǎng)景，如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);
