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

資訊專欄INFORMATION COLUMN

前端進(jìn)階（10） - webpack 之外的另一種選擇：parcel

sutaking / 705人閱讀

摘要：便提供了一個(gè)額外的選擇，對(duì)于不喜歡配置的開(kāi)發(fā)者尤其友好，因?yàn)闆](méi)有配置文件，僅有的少量配置項(xiàng)也是從命令行輸入。另外會(huì)自動(dòng)識(shí)別安裝在中的插件，然后導(dǎo)入，而無(wú)需手動(dòng)配置。與相比，零配置是最大的特點(diǎn)與優(yōu)勢(shì)，但沒(méi)有功能強(qiáng)大，也缺少了些靈活性。

webpack 之外的另一種選擇：parcel

之前有寫(xiě)過(guò)一篇 webpack 之外的另一種選擇：rollup，這次算是姊妹篇，介紹另外一個(gè)工具 parcel.

現(xiàn)在前端打包基本上都會(huì)用 webpack，但經(jīng)常使用 webpack 的開(kāi)發(fā)者基本都有一個(gè)體會(huì)：配置比較復(fù)雜，尤其是有很多項(xiàng)目的時(shí)候，更新需要到處改配置。

parcel 便提供了一個(gè)額外的選擇，對(duì)于不喜歡配置的開(kāi)發(fā)者尤其友好，因?yàn)?parcel 沒(méi)有配置文件，僅有的少量配置項(xiàng)也是從命令行輸入。另外 parcel 會(huì)自動(dòng)識(shí)別安裝在 package.json 中的 parcel 插件，然后導(dǎo)入，而無(wú)需手動(dòng)配置。

1. parcel 1.1 安裝 
# 全局
npm install -g parcel-bundler

# 本地
npm install --save-dev parcel-bundler
1.2 開(kāi)發(fā)

parcel 可以使用任何類型的文件作為入口，但一般是以 HTML 或 JavaScript 文件作為入口文件。

當(dāng)以一個(gè) html 文件作為入口進(jìn)行開(kāi)發(fā)時(shí)，在 html 文件中，你可以聲明多個(gè) js 入口文件，也可以聲明多個(gè) css 入口文件，也可以加載其他的靜態(tài)資源（如圖片）。




  
  Title

但一般都會(huì)只有一個(gè) js 入口，css 使用 js 來(lái)加載。




  
  Title

運(yùn)行開(kāi)發(fā)命令

parcel path/to/target.html

打包

parcel build path/to/target.html

以一個(gè) js 文件作為入口進(jìn)行開(kāi)發(fā)也是類似的，可以參考官方文檔 https://parceljs.org/。

2. parcel vs webpack

與 webpack 相比，零配置是 parcel 最大的特點(diǎn)與優(yōu)勢(shì)，但 parcel 沒(méi)有 webpack 功能強(qiáng)大，也缺少了些靈活性。

3. 后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

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

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

相關(guān)文章

  • 前端進(jìn)階（6） - webpack 之外的另一種選擇：rollup

    摘要：之外的另一種選擇對(duì)前端來(lái)說(shuō)是再熟悉不過(guò)的工具了，它提供了強(qiáng)大的功能來(lái)構(gòu)建前端的資源，包括等語(yǔ)言腳本，也包括等二進(jìn)制文件。所以，一個(gè)不錯(cuò)的選擇是，應(yīng)用使用，類庫(kù)使用。 webpack 之外的另一種選擇：rollup webpack 對(duì)前端來(lái)說(shuō)是再熟悉不過(guò)的工具了，它提供了強(qiáng)大的功能來(lái)構(gòu)建前端的資源，包括 html/js/ts/css/less/scss ... 等語(yǔ)言腳本，也包括 ima...

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

  • 前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度

    摘要：一般建議文件最大不超過(guò)。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項(xiàng)目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。 如何提升前端性能和響應(yīng)速度 下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語(yǔ)法上的優(yōu)化，可以參考： 如何提高頁(yè)面加載速度 編寫(xiě)高效的JavaScript Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇 1. 原生...

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

  • 前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度

    摘要：一般建議文件最大不超過(guò)。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項(xiàng)目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。 如何提升前端性能和響應(yīng)速度 下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語(yǔ)法上的優(yōu)化，可以參考： 如何提高頁(yè)面加載速度 編寫(xiě)高效的JavaScript Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇 1. 原生...

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

  • 前端構(gòu)建工具整理

    摘要：常見(jiàn)前端構(gòu)建工具的分類和對(duì)比是附帶的包管理器，是內(nèi)置的一個(gè)功能，允許在文件里面使用字段定義任務(wù)在這里，一個(gè)屬性對(duì)應(yīng)一段腳本，原理是通過(guò)調(diào)用去運(yùn)行腳本命令。 前文 端技術(shù)范圍不斷發(fā)展，前端開(kāi)發(fā)不僅限于直接編寫(xiě)html，css和javascript，Web應(yīng)用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語(yǔ)言（Es6 TypeSc...

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

  • 前端進(jìn)階（9） - js 性能優(yōu)化利器：prepack

    摘要：性能優(yōu)化利器性能優(yōu)化性能優(yōu)化不外乎從三個(gè)角度入手開(kāi)發(fā)者在編寫(xiě)程序時(shí)，盡量避免不必要的冗余代碼，包括冗余的第三方庫(kù)首先要避免不必要的冗余代碼，包括不必要的閉包不必要的變量與函數(shù)聲明不必要的模塊分割等。 js 性能優(yōu)化利器：prepack 1. js 性能優(yōu)化 js 性能優(yōu)化不外乎從三個(gè)角度入手： 1.1 開(kāi)發(fā)者在編寫(xiě)程序時(shí)，盡量避免不必要的冗余代碼，包括冗余的第三方庫(kù) 首先要避免不必要的...

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

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

0條評(píng)論

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