Parcel - 極速零配置Web應用打包工具

fireflow 發布于2019-08-21 18:24 / 3559人閱讀

摘要：極速零配置應用打包工具的優勢極速打包時間使用進程去啟用多核編譯。的缺點缺乏插件新出的打包工具，還在成長當中，插件的數量和這種成熟的工具是無法相比的。不太適合大項目畢竟配置，無需過多的配置即可使用。

開發項目或者寫 demo 的時候，還在為 webpack 的配置而煩惱？還在編寫臃腫的 gulpfile.js？也許你需要 Parcel 來拯救你的時間。

Parcel - 極速零配置Web應用打包工具

Parcel 的優勢：

極速打包時間

Parcel 使用 worker 進程去啟用多核編譯。同時有文件系統緩存，即使在重啟構建后也能快速再編譯。

將你所有的資源打包

Parcel 具備開箱即用的對 JS, CSS, HTML, 文件及更多的支持，而且不需要插件。

自動轉換

如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包會被用于自動轉換代碼.

零配置代碼分拆

使用動態 import() 語法, Parcel 將你的輸出文件束(bundles)分拆，因此你只需要在初次加載時加載你所需要的代碼。

熱模塊替換

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

友好的錯誤日志

當遇到錯誤時，Parcel 會輸出語法高亮的代碼片段，幫助你定位問題。

Parcel 的缺點：

缺乏插件

新出的打包工具，還在成長當中，插件的數量和 webpack, gulp 這種成熟的工具是無法相比的。

不太適合大項目

畢竟 0 配置，無需過多的配置即可使用。但是，若項目有復雜的文件處理，也許花點時間在配置上面更能提高效率。

使用 Parcel 開發

安裝 Parcel

$    npm install parcel-bundler --global

新建項目

$    mkdir parcel-demo
$    cd parcel-demo
$    npm init -y

處理 js 文件

一般情況下，都是使用 es6 開發，然后使用 babel 編譯成瀏覽器能運行的 js 代碼，這時需要安裝 babel 的插件。

$    yarn add babel-preset-env --dev
#    如果需要編譯其他版本的請自行安裝。

新建 babel 的配置文件 .babelrc ，這里只展示最基礎的配置：

{
  "presets": [
    "env"
  ],
  "plugins": []
}

處理 css 文件

在 Parcel 中，使用 postcss 去處理各種各樣的 css 和 scss 文件：

$    yarn add postcss autoprefixer node-sass --dev

新建 postcss 配置文件 .postcssrc :

{
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

autoprefixer 的瀏覽器兼容性配置文件 .browserlistrc ，具體的配置可以到這里查看。

> 1%
last 2 versions
iOS 8

處理 html 文件

~~暫無，正在尋找能將小圖片轉換為 base64 Parcel 插件~~

開發環境

如果需要監聽文件并啟動一個 HRM 服務器的話，請使用 parcel xxx.html

如果只需要監聽并編譯某個文件的話，請使用 parcel watch xxx.html, 該命令不會啟動熱更新服務器，當時會監聽文件的變化。

打包代碼

$    parcel build entry.js -d output_dir --public-url public_dir

entry.js 為打包的入口文件，可以是 HTML 文件。

--out-dir / -d 為設定打包后文件存放的路徑，默認為 ./dist

--public-url 為設定打包后的引入文件的路徑，默認為 /dist/。若為 ./ 則打包后所有的文件都應放置在同一個目錄下；若為 custom_dir 則打包后，除了入口 html 文件，其余文件應當放置在 custorm_dir 目錄下。建議設置為絕對路徑，此處有多文件資源引入的坑，已提交 issue。

Enjoy Coding with zero configurations.

附上一個簡易的 Parcel 項目架構，GitHub 。拉下即可開始開發。

云服務器 GPU云服務器開發工具瀏覽器web應用 java web應用多臺服務器配置打包工具 python打包工具

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

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

Parcel上手——又一個打包工具

摘要：是什么極速零配置應用打包工具說到打包工具，大多人應該都用過，也是這一類工具。這里結合文件命名你應該知道為什么會有兩個文件了。直接上結論在內部引用的情況下，修改文件內容并不會實時更改頁面效果，內部引入時無此問題。 Parcel是什么？極速零配置Web應用打包工具說到打包工具，大多人應該都用過Webpack，Parcel也是這一類工具。 Parcel相比Webpack有什么優勢？配...

Dr_Noooo 2019-08-01 18:25 評論0 收藏0
Parcel上手——又一個打包工具

摘要：是什么極速零配置應用打包工具說到打包工具，大多人應該都用過，也是這一類工具。這里結合文件命名你應該知道為什么會有兩個文件了。直接上結論在內部引用的情況下，修改文件內容并不會實時更改頁面效果，內部引入時無此問題。 Parcel是什么？極速零配置Web應用打包工具說到打包工具，大多人應該都用過Webpack，Parcel也是這一類工具。 Parcel相比Webpack有什么優勢？配...

cyqian 2019-08-22 13:56 評論0 收藏0
Parcel上手——又一個打包工具

摘要：是什么極速零配置應用打包工具說到打包工具，大多人應該都用過，也是這一類工具。這里結合文件命名你應該知道為什么會有兩個文件了。直接上結論在內部引用的情況下，修改文件內容并不會實時更改頁面效果，內部引入時無此問題。 Parcel是什么？極速零配置Web應用打包工具說到打包工具，大多人應該都用過Webpack，Parcel也是這一類工具。 Parcel相比Webpack有什么優勢？配...

printempw 2019-08-29 14:17 評論0 收藏0
深入 Parcel--架構與流程篇

摘要：本篇文章是對的源碼解析，代碼基本架構與執行流程，帶你了解打包工具的內部原理，在這之前你如果對不熟悉可以先到官網了解介紹下面是偷懶從官網抄下來的介紹極速零配置應用打包工具極速打包使用進程去啟用多核編譯。 showImg(https://segmentfault.com/img/bVbpZRp?w=1241&h=893); 本篇文章是對 Parce 的源碼解析，代碼基本架構與執行流程，帶你...

yuxue 2019-08-23 16:00 評論0 收藏0
一篇文章學會 TypeScript

摘要：接下來來看一段代碼示例語法與語言比較當類型不對的時候，會提示錯誤編譯后語法聯想大致可以把它看成是加了類型系統的。一篇文章學會 TypeScript （內部分享標題：TypeScript 基礎）這篇文章是我在公司前端小組內部的演講分享稿，目的是教會大家使用 TypeScript，這篇文章雖然標著基礎，但我指的基礎是學完后就能夠勝任 TypeScript 的開發工作。從我分享完的效果來...

itvincent 2019-08-23 17:54 評論0 收藏0