新一代打包神器parcel簡介

Jenny_Tong 發布于2019-08-22 15:14 / 1428人閱讀

摘要：友好的錯誤記錄體驗，語法突出顯示的代碼幀有助于查明問題。為入口資源創建一個，并為動態導入的資源創建子，這回導致代碼拆分的發生。如果一個資源需要多個，它會被打包到最近的共同祖先，因此它不會被包含多次。

官方地址：https://parceljs.org/getting_...

Parcel 是 Web 應用打包工具，適用于經驗不同的開發者。它利用多核處理提供了極快的速度，并且不需要任何配置。

特性

快速打包：多核編譯，以及文件系統緩存，即使在重新啟動之后也能快速重新構建。

支持JS、CSS、HTML、文件資源等，不需要安裝任何插件。

在需要的時候自動使用Babel、PostCSS和PostHTML自動轉換模塊，甚至是node_modules。

零配置,代碼拆分，使用動態import語句分隔。

內置支持模塊熱替換。

友好的錯誤記錄體驗，語法突出顯示的代碼幀有助于查明問題。

工作方式

parcel 將資源樹轉換為 bundle 樹。許多其它的打包工具基本上都是基于 JS 資源，其它格式都是粘貼的-例如，默認情況下以字符串的形式內嵌到 JS 中。parcel 是文件類型無關的-它可以按照你期望的方式與任何類型的資源一起工作，無需配置。

parcel 將一個入口點作為輸入，可以是任何類型的：JS文件，HTML，CSS，image 等。在 parcel 中定義了各種資源類型，它們知道如何處理特定的資源類型。資源文件被解析，它的依賴關系被提取，并轉換成最終的編譯形式。這創建了一個資源樹。

一旦資源樹被構建，資源就被放入一個bundle樹中。為入口資源創建一個 bundle，并為動態導入的資源創建子 bundle，這回導致代碼拆分的發生。當導入不同類型的資源的時候就會創建子 bundle，例如如果你在 JavaScript 中導入 CSS 文件，它就會打包成對應 JavaScript 的兄弟 bundle。如果一個資源需要多個bundle，它會被打包到最近的共同祖先，因此它不會被包含多次。

在構建bundle樹之后，每一個包都有特定的文件類型的包裝器寫入文件。打包器知道如何將每個資源的代碼合并到由瀏覽器加載的最終文件中。

入門

安裝

yarn global add parcel-bundler

或

npm install -g parcel-bundler

Parcel 可以將任何類型的文件作為 entry point(入口點)，但是 HTML 或 JavaScript 文件是一個很好的開始。如果你使用相對路徑將你的主 JavaScript 文件鏈接到 HTML 中，Parcel 也會為你處理，并將該引用替換為輸出文件的URL。

console.log("hello world");

Parcel 內置了一個開發服務器，這會在你更改文件時自動重建你的應用程序，并支持模塊熱替換，以便你快速開發。你只需指定入口文件即可：

parcel index.html

webpack與parcel比較

Webpack 打包時間 = parse string n + transform n + parse to AST + compress

Parcel 打包時間 = parse to AST + transform * n + compress

Webpack 之所以有時感覺很慢，是因為代碼轉譯全靠 loader 進行字符串處理。比如一個 index.js 有可能要經歷 loaderA -> loaderB -> loaderC，這些 loader 完全不知道彼此之間的存在，都是接過來一個字符串自己處理，然后再交給下一個。如果最后再 uglify 一下還要先 parse 為 AST（抽象語法樹）再壓縮，這一步也是比較耗時的。

因此，parcel 至少為我們提供了一個很好的思路：多步轉譯 + 壓縮時，每一步都可以利用到已經解析過后的 AST，只要完成各自的 transform 即可。

使用parcel的優勢

零配置，只需要將它指向應用程序入口點，就能正常工作

構建快速，具有文件系統緩存，可以保存每個文件的編譯結果

parcel的轉換工作在AST上，每個文件只有一個解析，多個轉換以及一個代碼生成

原文鏈接：https://github.com/parcel-bun...

GPU云服務器云服務器 Parcelable Parcel Parcelize 神器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93293.html

2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續的獲得了業界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

xiao7cn 2019-08-29 14:12 評論0 收藏0
2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續的獲得了業界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

用戶84 2019-08-21 18:42 評論0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出現了，它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具，，，，以發布時間為順序。它定位是模塊打包器，而屬于構建工具。而且在其他的打包工具在處理非網頁文件比如等基本還是需要借助它來實現。本文當時寫在本地，發現換電腦很不是方便，在這里記錄下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以錦上添花，不使用也沒關系...

Sleepy 2019-08-23 18:03 評論0 收藏0
匯總2017JS項目，總結我們從中學到了什么？

摘要：個人感悟自己公司也有項目在用，學的難點在于，其他的話上手挺快的，而且是尤大寫的，中文文檔也很完整，很適合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 當紅辣子雞——vue 和去年一樣，vue是js項目中點贊數增加最多的，我們可以看下圖： showImg(https://se...

dantezhao 2019-08-22 13:55 評論0 收藏0