前端戰五渣學前端——初探Parcel急速打包

what is parcel

文中有視頻，建議在wifi環境下觀看，並使用電腦

爲了傳視頻，發現本身的服務器帶寬不行，特別卡，而後弄的oss，發現oss好便宜啊！！

parcel是什麼呢？？？首先咱們得了解，parcel作的事情跟webpack差很少，只是差很少。以前在官網出現過相似「開箱即用」、「0配置打包」等字樣，看樣子是一個主打簡潔的一個打包工具。

以前我接觸的打包工具備什麼gulp，grunt，webpack，還據說過browserify和fis（據說過，沒有用過）都是打包工具，可是當我發現有這麼個parcel的時候，這玩意真的是另闢蹊徑啊。在webpack中，js是「一等公民」，從咱們在webpack配置入口文件是js就能夠看出來。可是parcel居然能夠以html文件爲入口文件，這我就感受很牛逼了，畢竟我從一開始就認爲html應該是最基礎的，是用戶或者說客戶端最早接收到的文件，而後剩餘的文件都是從html文件直接或者間接引入的。

parcel's Features

🚀 極速打包 Parcel——使用 worker 進程去啓用多核編譯。同時有文件系統緩存，即便在重啓構建後也能快速再編譯。

📦 將你全部的資源打包——Parcel 具有開箱即用的對 JS, CSS, HTML, 文件 及更多的支持，並且不須要插件。

🐠 自動轉換——如如有須要，Babel, PostCSS, 和PostHTML甚至 node_modules 包會被用於自動轉換代碼.

✂️ 零配置代碼分拆——使用動態import() 語法, Parcel 將你的輸出文件束(bundles)分拆，所以你只須要在初次加載時加載你所須要的代碼。

🔥 熱模塊替換——Parcel 無需配置，在開發環境的時候會自動在瀏覽器內隨着你的代碼更改而去更新模塊。

🚨 友好的錯誤日誌——當遇到錯誤時，Parcel 會輸出 語法高亮的代碼片斷，幫助你定位問題。

官網還在最後貼出與其餘打包工具的打包速度對比（可見parcel是多以速度自豪）

是否有人跟我有同樣的感受，在一個須要測試或者熟悉某個庫的時候，我很抵觸去徹底寫一套webapck的配置，而後進行打包，才能看到真正的效果（可能有人說他們有事先寫好的一個簡單配置。。。額。。），因此以前真的很但願出現一個開箱即用，不須要態度配置，定製化的打包工具（webpack現已支持(⊙﹏⊙)），沒想到啊，parcel就能夠這樣

廢話很少說，how to use parcel

install

官方文檔讓咱們直接全局安裝，那咱們就全局安裝

npm install -g parcel-bundler
複製代碼

這個時候咱們已經就能夠用parcel進行打包了

從上面咱們能夠看到，咱們直接打包的時候，命令是parcel index.html，而且直接使用的是export / import照打不誤，而且還有實時更新的功能。

react

咱們工做中常常須要用到相似vue或者react的地方，咱們公司用的react，因此我用react作演示，同樣很快

這些視頻我都沒有加速，因此咱們能夠看出來，parcel的打包速度確實算是能夠了，並且不須要配置babel或者postcss，由於parcel已經幫咱們預設了一些，若是咱們要改，固然也是能夠的

自定義.babelrc

那咱們來本身定義一下.babelrc，咱們用ant design來試驗一下。

這裏不明白的能夠看一下antd的文檔，咱們經過自定義.babelrc的內容，能夠不用每次引入整個antd，不用單獨引入antd的css文件。看效果咱們只引入了antd的Button的組件。

scss and image

咱們在寫一個前端項目的時候，不免會用到。。。。確定會用到css，而想less，sass這種預編譯的語言確定也都會用到，可是預編譯，咱們須要多一次轉換，webpack中須要對應的loader來處理，可是parcel能夠直接寫

我在下面中提早保存了一張圖片。

這裏面偶然看見了parcel的一個特性，高亮的錯誤提示，很厲害啊，跟vue的相似，整個屏幕給你報錯。。。。

這裏面scss和圖片咱們都是直接飲用直接處理的

其他

我上面演示的只是parcel極少的一部分功能，parcel還能夠打包多文件，還能夠處理typescript啊，vue啊等文件

還能夠進行線上打包，就是打包出來的代碼是通過壓縮過的。

我覺得

其實我雖然感受parcel很牛逼，幾乎能夠作到零配置就上手使用，可是對於如今複雜的工程化前端項目，千奇百怪的需求，對定製化要求極高的使用場景，我以爲parcel的用武之地不是很大

可是

我會用，就是在我看到一個新的庫，一個感興趣的插件，我確定會用parcel來打包，由於不用考慮，直接打包看效果就ok了（雖然如今webpack）也能夠作到了。。。。

不知道各位看官怎麼看parcel這個打包工具呢？？？

---

我是前端戰五渣，一個前端界的小學生。