包裹,更簡單的Webpack

Parcel是一個Web應用程序捆綁程序。它在webpack的同一工具類別中,具有不同的價值主張。包裹承諾可以做很多事情而無需任何配置,而且速度也很快。

Parcel是一個Web應用程序捆綁程序。

與以下工具類別相同網頁包,具有不同的價值主張。

它的主要功能包括

  • 資產捆綁(JS,CSS,HTML,圖像)
  • 零配置代碼拆分
  • 自動轉換使用巴別塔的CSS和PostHTML
  • 熱模塊更換
  • 緩存和並行處理,可加快構建速度

Parcel承諾無需任何配置即可完成所有這些工作,而且速度也很快。

安裝

使用以下方式安裝包裹

yarn global add parcel-bundler

或者npm

npm install -g parcel-bundler

啟動包裹

包裹可以使用開始

parcel watch index.html

它將開始從HTML頁面源中掃描資產,並將其處理的任何引用替換為輸出文件。

您還可以將Parcel指向JS文件:

parcel watch entry.js

開發服務器

方便的是,Parcel帶有內置的開發服務器,因此您無需設置服務器。您可以從以下內容開始:

parcel index.html

生產就緒包

當您對應用程序滿意並想要創建可用於生產環境的捆綁包時,請運行

parcel build index.html

生產捆綁包將禁用熱模塊更換,並且不會監視您的更改,生產捆綁包在捆綁完成後就存在,並且使用了縮小器。

它還會自動觸發NODE_ENV可變為production,以使庫生成生產代碼(例如React和Vue使用此約定)

資產

JavaScript

包裹都支持ES模塊import...) 和普通JSrequire...)。

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

這是什麼意思,為什麼有用?

動態導入會返回一個承諾,而不是在應用程序啟動時加載所有依賴項,我們可以要求瀏覽器加載它們,但僅在準備就緒時才執行應用程序的某些部分。

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

代碼分割更多細節。

CSS

包裹支持普通的CSS,Sass,Less和Stylus。

您可以使用編寫CSSCSS模塊

變身

當Parcel發現您具有以下其中一項的配置時

  • 通天塔(.babelrc
  • PostCSS(.postcssrc
  • PostHTML(.posthtmlrc

它將在捆綁過程中自動使用它。

熱模塊更換

生成應用程序時,熱模塊更換(HMR)是有用的功能。當我們保存CSS或JavaScript的新副本時,HMR將負責在瀏覽器中更新模塊,而無需刷新整個應用程序。

這很酷,特別是如果您的應用程序具有許多狀態需要觸發以測試特定功能(例如,“轉到設置,單擊此項,鍵入...”),則該選項很酷。

包裹與Webpack

讓我們將Parcel與webpack進行比較,因為它非常流行,您可能聽說過或在項目中使用過。即使您從未使用過任何區別,也很高興知道它們之間的區別。

webpack允許您做很多事情,儘管這很酷,但也意味著我們需要仔細配置它以完全執行我們想要的事情。

有時webpack.config.js文件增長到幾百行,我們將其複制/粘貼到下一個項目,如果需要修改它會很麻煩。

包裹承諾我們會做很多webpack的事情,但是完全沒有任何配置, 靠約定優於配置

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

雖然webpack有數以千計的插件,包裹有一些,但並未在網站上進行宣傳,這表明Parcel的開發人員希望我們避免使用插件,直到我們由於無法適應Parcel的約定而無法真正避免使用插件,或者使Parcel支持它所支持的某種東西不開箱即用。

您應該使用哪一個?我會建議將Parcel用於小型項目,如果您無法使用Parpack,並且希望對模塊捆綁器所做的一切進行絕對控制,則建議使用webpack。


更多devtools教程: