成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Parcel - 極速零配置Web應(yīng)用打包工具

fireflow / 3584人閱讀

摘要：極速零配置應(yīng)用打包工具的優(yōu)勢極速打包時間使用進(jìn)程去啟用多核編譯。的缺點(diǎn)缺乏插件新出的打包工具，還在成長當(dāng)中，插件的數(shù)量和這種成熟的工具是無法相比的。不太適合大項(xiàng)目畢竟配置，無需過多的配置即可使用。

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

Parcel - 極速零配置Web應(yīng)用打包工具
Parcel 的優(yōu)勢：

極速打包時間

Parcel 使用 worker 進(jìn)程去啟用多核編譯。同時有文件系統(tǒng)緩存，即使在重啟構(gòu)建后也能快速再編譯。

將你所有的資源打包

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

自動轉(zhuǎn)換

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

零配置代碼分拆

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

熱模塊替換

Parcel 無需配置，在開發(fā)環(huán)境的時候會自動在瀏覽器內(nèi)隨著你的代碼更改而去更新模塊。

友好的錯誤日志

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

Parcel 的缺點(diǎn)：

缺乏插件

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

不太適合大項(xiàng)目

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

使用 Parcel 開發(fā)

安裝 Parcel

$    npm install parcel-bundler --global

新建項(xiàng)目

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

處理 js 文件

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

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

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

{
  "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 文件

暫無，正在尋找能將小圖片轉(zhuǎn)換為 base64 Parcel 插件

開發(fā)環(huán)境

如果需要監(jiān)聽文件并啟動一個 HRM 服務(wù)器的話，請使用 parcel xxx.html

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

打包代碼

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

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

--out-dir / -d 為設(shè)定打包后文件存放的路徑，默認(rèn)為 ./dist

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

Enjoy Coding with zero configurations.

附上一個簡易的 Parcel 項(xiàng)目架構(gòu)，GitHub 。拉下即可開始開發(fā)。

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

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

相關(guān)文章

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

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

    Dr_Noooo 評論0 收藏0

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

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

    cyqian 評論0 收藏0

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

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

    printempw 評論0 收藏0

  • 深入 Parcel--架構(gòu)與流程篇

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

    yuxue 評論0 收藏0

  • 一篇文章學(xué)會 TypeScript

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

    itvincent 評論0 收藏0

發(fā)表評論

0條評論

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