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

資訊專(zhuān)欄INFORMATION COLUMN

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

fireflow / 3624人閱讀

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

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

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

極速打包時(shí)間

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

將你所有的資源打包

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

自動(dòng)轉(zhuǎn)換

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

零配置代碼分拆

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

熱模塊替換

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

友好的錯(cuò)誤日志

當(dāng)遇到錯(cuò)誤時(shí)，Parcel 會(huì)輸出 語(yǔ)法高亮的代碼片段，幫助你定位問(wèn)題。

Parcel 的缺點(diǎn)：

缺乏插件

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

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

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

使用 Parcel 開(kāi)發(fā)

安裝 Parcel

$    npm install parcel-bundler --global

新建項(xiàng)目

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

處理 js 文件

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

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

新建 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 文件

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

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

如果需要監(jiān)聽(tīng)文件并啟動(dòng)一個(gè) HRM 服務(wù)器的話(huà)，請(qǐng)使用 parcel xxx.html

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

打包代碼

$    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)放置在同一個(gè)目錄下；若為 custom_dir 則打包后，除了入口 html 文件，其余文件應(yīng)當(dāng)放置在 custorm_dir 目錄下。建議設(shè)置為絕對(duì)路徑，此處有多文件資源引入的坑，已提交 issue。

Enjoy Coding with zero configurations.

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

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

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

相關(guān)文章

  • Parcel上手——又一個(gè)打包工具

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

    Dr_Noooo 評(píng)論0 收藏0

  • Parcel上手——又一個(gè)打包工具

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

    cyqian 評(píng)論0 收藏0

  • Parcel上手——又一個(gè)打包工具

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

    printempw 評(píng)論0 收藏0

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

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

    yuxue 評(píng)論0 收藏0

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

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

    itvincent 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<