Parcel是一個網頁應用程序打包工具。它與Webpack處於同一工具類別，但有不同的價值主張。Parcel承諾可以不需要任何配置，同時保持速度快。

Parcel是一個網頁應用程序打包工具。

它與Webpack處於同一工具類別，但有不同的價值主張。

主要功能包括：

  • 資源打包（JS、CSS、HTML、圖片）
  • 零配置代碼拆分
  • 使用Babel、PostCSS和PostHTML的自動轉換
  • 熱模塊替換
  • 使用緩存和並行處理以加快構建速度

Parcel承諾可以在不需要任何配置的情況下完成所有這些工作，同時達到快速的速度。

安裝

使用Yarn安裝Parcel：

yarn global add parcel-bundler

或使用npm安裝：

npm install -g parcel-bundler

啟動Parcel

可以使用以下命令啟動Parcel：

parcel watch index.html

它會從HTML頁面的源代碼開始掃描資源，並用輸出文件替換它所處理的任何引用。

也可以指定一個JS文件：

parcel watch entry.js

開發服務器

方便起見，Parcel內置了一個開發服務器，因此無需另外設置。可以使用以下命令啟動：

parcel index.html

產品化打包

當您的應用程序滿意並且希望創建產品化打包時，運行以下命令：

parcel build index.html

產品化打包將禁用熱模塊替換，不會監視更改，只有在打包完成後才存在，並且將使用壓縮工具。

它還會自動將NODE_ENV變量設置為production，以使庫生成生產代碼（例如React和Vue使用此約定）

資源

JavaScript

Parcel支持ES Modules（import...）和CommonJS（require...）。

它使用動態導入執行自動代碼拆分。

這是什麼意思，為什麼有用？

動態導入返回一個promise，它可以讓瀏覽器在需要時加載依賴項，只有當它們準備就緒時才執行應用程序的某些部分。

或者，我們可以要求瀏覽器只在需要時加載它們，例如當用戶點擊特定鏈接時。

有關詳細信息，請參閱code splitting。

CSS

Parcel支持純CSS、Sass、Less和Stylus。

您可以使用CSS Modules來編寫CSS。

轉換

當Parcel發現您配置了以下之一的配置文件：

  • Babel（.babelrc）
  • PostCSS（.postcssrc）
  • PostHTML（.posthtmlrc）

它會在打包過程中自動使用這些配置。

熱模塊替換

當構建應用程序時，熱模塊替換（HMR）是一個很有用的功能。當我們保存一個新的CSS或JavaScript副本時，HMR會負責更新瀏覽器中的模塊，而不需要刷新整個應用程序。

如果您的應用程序具有多個狀態，您需要觸發特定功能測試（例如：“轉到設置頁面，點擊這個，輸入那個…”），這將非常方便。

Parcel vs webpack

讓我們將Parcel與webpack進行比較，因為webpack非常流行，您可能已經聽說過它或在項目中使用過它。即使您從未使用過它們，了解它們的區別也是一件很不錯的事情。

webpack允許您做很多事情，雖然這非常酷，但也意味著我們需要仔細配置它，以便確切地做到我們想要的事情。

有時，webpack.config.js文件會增長到數百行，並且我們將其復制/粘貼到下一個項目中，如果我們需要修改它，這將是一個痛苦的過程。

Parcel承諾可以在不需要任何配置的情況下完成大部分webpack的工作，並依賴於約定優於配置的原則。

webpack 4，主要為了回應Parcel的成功，引入了一種零配置模式，並附有一些約定，而不是總是需要配置。

儘管webpack擁有數千個插件，Parcel只有一些插件，但它們並未在網站上打廣告，這表明Parcel的開發人員希望我們在不能適應Parcel的約定時盡量避免使用插件，或使Parcel支持它們無法提供的功能。

**該選擇哪一個呢？**我建議在小型項目中使用Parcel，在您擴展其功能並且希望對模塊打包器的每一個細節都有絕對控制時，使用webpack。