parcel簡介

時間 2019-11-08

標籤 parcel 簡介简体版

原文原文鏈接

特色

? 火速打包時間 - 多核編譯，以及即便重啓也能快速重構的文件系統緩存.
? 支持HTML,CSS,JS等文件資源 - 無需安裝插件.
? 自動轉換模塊 在須要時利用 Babel, PostCSS, and PostHTML - 甚至是 node_modules.
✂️ 零配置 代碼分割 使用動態的 import() 聲明.
? 支持 模塊熱更新
? 友好的錯誤日誌體驗 - 高亮代碼以便指出問題所在.

起步

Install with yarn:

yarn global add parcel-bundler

or with npm:html

npm install -g parcel-bundler

Parcel能夠把人和類型的文件做爲入口文件，可是最好是HTML文件或則JS文件.若是你在一個HTML中使用相對路徑引入主要的JS文件, Parcel 也會處理, 並將相關文件替換爲輸出文件的URL.

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

Parcel有一個內置開發服務器, 當文件改變的時候他能夠自動重構你的APP，並且支持模塊熱更新. 只須要指出你的入口文件便可:

parcel index.html

如今在你的瀏覽器中打開 http://localhost:1234/. 若是有須要你能夠利用 -p 這個配置來覆蓋默認端口.

See parceljs.org for more documentation!node

基準

基於一個合理大小的 app, 包含 1726 個模塊, 沒壓縮前是6.5M . 在一臺 2016的 MacBook Pro上測試.webpack

Bundler	Time
browserify	22.98s
webpack	20.71s
parcel	9.98s
parcel - with cache	2.64s

爲何選擇parcel?

目前已經有許多應用很是普遍的打包工具，好比webpack 和 browserify. 因此爲何要使用parcel?答案是：爲了提升開發體驗。web

許多打包工具須要許多配置，下載許多插件, 僅僅爲了讓應用工做，就須要寫上超過500行的配置，這是十分常見的. 這些配置不只無聊並且耗時, 並且想要配置正確也不容易。這每每不能使應用在性能上達到最優化。 parcel 很自豪地告訴你，咱們不須要任何配置: 僅僅須要指出你的入口文件，它就能幫你解決問題。shell

已有的打包器運行速度也很緩慢。擁有許多文件和依賴的大型應用須要花費數分鐘打包, 在開發階段文件常常須要改變的狀況下，這尤爲痛苦。文件watcher會幫助咱們從新打包，但初次啓動仍然十分緩慢。 parcel在parallel中利用現代的多核處理器去編譯代碼。這就在初次構建時節省了許多時間。它也有一個文件系統緩存, 它能夠保存每一個文件的編譯結果，從而實現更快的後續啓動。npm

最後，現有的打包器是基於string loader/轉換的，其中轉換須要一個字符串，解析它，進行一些轉換，而後再次生成代碼。一般這最終致使許多解析和代碼生成在單個文件上運行，這是低效的。相反，parcel的轉換工做在AST上，所以每一個文件只有一個解析，多個轉換和一個代碼生成。瀏覽器

How it works

parcel transforms a tree of assets to a tree of bundles. Many other bundlers are fundamentally based around JavaScript assets, with other formats tacked on - for example, by default inlined as strings into JS files. parcel is file-type agnostic - it will work with any type of assets the way you'd expect, with no configuration.緩存

parcel將文件樹轉換爲打包樹。許多其餘打包器基本上都是基於JavaScript文件，其餘類型的文件都是基於js文件的 - 例如，默認狀況下內嵌爲JS文件的字符串。 parcel的文件類型不可知 - 它能夠按照您指望的方式處理任何類型的文件，而無需配置。服務器

一旦文件樹已經被構建完畢，文件就被放入打包樹中。爲入口文件建立一個包，併爲動態import()建立子包，這會致使代碼拆分的發生。當導入不一樣類型的文件時，也會建立子包，例如，若是您從JavaScript導入CSS文件，則會將其綁定到相應的JavaScript的兄弟包中。若是一個文件須要被多個包引用，它將被打包到最近的共同祖先，所以它不會被包含屢次。app

在打包樹被建立之後，每一個包都由特定於文件類型的包裝器寫入文件。 packagers 知道如何將每一個文件的代碼合併到由瀏覽器加載的最終文件中。

1. 新一代打包神器parcel簡介
2. 全新打包工具-Parcel介紹
3. parcel打包vue
4. webpack VS parcel
5. Parcel Vs Webpack
6. Parcel入門
7. 初探Parcel
8. parcel初體驗
9. 關於Parcel
10. parcel 報錯問題
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。