前端打包你應該用哪些

打包工具

我們在開發的過程中，不可避免的出現一些需要多專案同步的問題。

像公司向的內部元件庫，公司向的通用

CSS

樣式，以便於多專案樣式統一。

以及我們在開發過程中，常用的一些函式，避免採用複製貼上的方式呼叫，否則可能會出現一個函數出現問題，多個專案多需要更新，且容易遺漏的問題。

且我們自身的業務專案，如

Vue

、

React

單頁面應用，也需要打包工具，但由於各個框架幫我們封裝了打包，我們便對這方面的問題關心的更少了。

所以我們就需要一個專用的打包工具，以便於我們更好的打包。而這篇文章的目的是幫助大家認識各個打包工具，且總結他們的優缺點。

常見的前端打包工具有哪些？

webpack

parcel

rollup

gulp

程式碼構建後的輸出格式有哪些？

amd - AMD

cjs -CommonJS

es - ES6 modules

umd - UMD

system - SystemJS loader

不同格式：

node環境： cjs

瀏覽器環境： iife

兩者兼具： umd

逐個分析

webpack

官網：

webpack。docschina。org/

特點：

模組化載入器兼打包工具

優點：

通用模組打包載入器，為移動端大型 SPA 應用而生

一切皆模組的特點適合單頁面應用開發

可以打包一切資源，適配各種模組系統

文件詳細

所有資源打包在一起能明顯減少瀏覽器訪問頁面時的資源請求數量

這個優點可能會隨著

HTTP/2

的流行而變得不那麼突出，因為

HTTP/2

的多路複用可以有效解決客戶端並行請求時的瓶頸問題。

缺點：

有大量

新概念

和

api

不適合多頁應用開發

靈活度高但同時配置很繁瑣複雜

parcel

打包速度：

優點：

可以透過

HTML

作為入口檔案

中文文件友好

打包速度快

缺點：

用的人少，容易有一些找解決方案較麻煩的坑，不適合用於生產環境，可以做一些

demo

gulp

特點：

基於流的自動化構建工具

優點：

適合多頁面開發

易學

易用

介面優雅（

5

個

api

）

缺點：

單頁面應用乏力

如

Vue

單檔案元件，使用

gulp

處理就會很困難，而

webpack

一個

loader

就能輕鬆搞定

rollup

特點：

Rollup

是一個

JavaScript

模組打包器，可以將小塊程式碼編譯成大塊複雜的程式碼，例如

library

或應用程式。

與

Webpack

偏向於應用打包的定位不同，

rollup。js

更專注於

Javascript

類庫打包

優點：

我們熟知的諸多框架都是透過

rollupjs

進行打包。

taro-ui

react

vue

如：

tree shaking

靜態分析，只打包用到的程式碼

支援

iife

輸出格式（程式碼執行速度快）

適合構建

lib

缺點：

不適合構建應用

我們在日常線上業務程式碼中，或多或少需要一些靜態資源包，因此還是

webpack

合適。 打包靜態資源時，可以引出去，讓使用者按需引用。

最後

市面上主流的前端打包工具大體上就是這些，大家可以根據自己的需要選擇不同的打包工具。