亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

新一代打包神器parcel簡介

Jenny_Tong / 1512人閱讀

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

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

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

特性

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

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

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

零配置,代碼拆分，使用動態(tài)import語句分隔。

內(nèi)置支持模塊熱替換。

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

工作方式

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

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

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

在構(gòu)建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 內(nèi)置了一個開發(fā)服務(wù)器，這會在你更改文件時自動重建你的應(yīng)用程序，并支持 模塊熱替換 ，以便你快速開發(fā)。你只需指定 入口文件 即可：

parcel index.html

webpack與parcel比較

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

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

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

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

使用parcel的優(yōu)勢

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

構(gòu)建快速，具有文件系統(tǒng)緩存，可以保存每個文件的編譯結(jié)果

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93293.html

相關(guān)文章

  • 2018前端值得關(guān)注的技術(shù)

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

    xiao7cn 評論0 收藏0

  • 2018前端值得關(guān)注的技術(shù)

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

    用戶84 評論0 收藏0

  • Javascript 打包工具

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

    Sleepy 評論0 收藏0

  • 匯總2017JS項目，總結(jié)我們從中學(xué)到了什么？

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<