雖然webpack提供了非常多靈活的配置，但是與之帶來(lái)的是復(fù)雜度的提升，而Parcel卻非常的簡(jiǎn)潔。愛掏網(wǎng) - it200.comParcel自己的口號(hào)也是非常直白：零配置。愛掏網(wǎng) - it200.com
為什么這么神奇？— Parcel有一個(gè)開箱即用的開發(fā)服務(wù)器。愛掏網(wǎng) - it200.com 開發(fā)服務(wù)器會(huì)在您更改文件時(shí)自動(dòng)重建您的應(yīng)用程序，并支持熱模塊重載以實(shí)現(xiàn)快速開發(fā)。愛掏網(wǎng) - it200.com
- 快速捆綁時(shí)間 - Parcel比Webpack，Rollup和Browserify更快。愛掏網(wǎng) - it200.com
然而需要注意的是：Webpack仍然很棒，有時(shí)可能會(huì)更快
-
Parcel支持JS，CSS，HTML，file assets等等，并且不需要插件配置，用戶體驗(yàn)更友好。愛掏網(wǎng) - it200.com
-
零配置需要：開箱即用的代碼分割，熱模塊重新加載，css預(yù)處理器，開發(fā)服務(wù)器，緩存等等！
-
更友好的錯(cuò)誤日志。愛掏網(wǎng) - it200.com
Fundebug：及時(shí)發(fā)現(xiàn)Bug，提高Debug效率！
其實(shí)主要取決于你自己，但我個(gè)人會(huì)通過(guò)以下情況來(lái)選擇適合的：
Parcel： 中小型項(xiàng)目（1.5萬(wàn)行代碼以內(nèi)）。愛掏網(wǎng) - it200.com Webpack：?大型企業(yè)規(guī)模項(xiàng)目。愛掏網(wǎng) - it200.com Rollup： 用于NPM包。愛掏網(wǎng) - it200.com
npm install parcel-bundler --save-dev我們?cè)诒镜匕惭b了?parcel-bundler的npm包,現(xiàn)在我們需要初始化一個(gè)node項(xiàng)目。愛掏網(wǎng) - it200.com
把index.html?和?index.js?關(guān)連起來(lái)。愛掏網(wǎng) - it200.com
最后將parcel腳本添加到我們的package.json中
這就是所有的配置，是不是非常簡(jiǎn)單。愛掏網(wǎng) - it200.com
接下來(lái)，讓我們開啟服務(wù)器。愛掏網(wǎng) - it200.com
效果明顯了，大佬們請(qǐng)注意構(gòu)建時(shí)間！
15ms?! 是不是很牛逼！
再看一下HMR
也感覺非常快啊。愛掏網(wǎng) - it200.com
同樣先需要裝node-sass包
npm i node-sass && touch styles.scss接下來(lái)，添加一些樣式并將
styles.scss導(dǎo)入index.js文件
。愛掏網(wǎng) - it200.com
生產(chǎn)構(gòu)建
我們所需要的只是將一個(gè)build腳本添加到我們的package.json中
運(yùn)行build腳本
看看Parcel如何讓我們的生活變得輕松？
你可以像這樣指定一個(gè)特定的build路徑：
parcel build index.js -d build/outputFundebug錯(cuò)誤實(shí)時(shí)監(jiān)控為您的React項(xiàng)目保駕護(hù)航！
React
設(shè)置React非常簡(jiǎn)單，我們需要做的就是安裝我們的依賴并設(shè)置我們的.babelrc。愛掏網(wǎng) - it200.com
npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc
來(lái)寫個(gè)初始化React組件玩玩吧！
Fundebug錯(cuò)誤實(shí)時(shí)監(jiān)控為您的Vue項(xiàng)目保駕護(hù)航！
Vue
首先安裝vue和parcel-plugin-vue?，其中parcel-plugin-vue用于.vue組件支持。愛掏網(wǎng) - it200.com
$ npm i --save vue parcel-plugin-vue需要添加我們的根元素，導(dǎo)入vue的index文件并初始化Vue。愛掏網(wǎng) - it200.com
首先生成個(gè)vue目錄，然后創(chuàng)建index.js和app.vue。愛掏網(wǎng) - it200.com
$ mkdir vue && cd vue && touch index.js app.vueindex.html引用ndex.js。愛掏網(wǎng) - it200.com
最后，讓我們初始化vue并編寫我們的第一個(gè)vue組件！
TypeScript
這個(gè)非常簡(jiǎn)！只需安裝TypeScript，我們就可以開始。愛掏網(wǎng) - it200.com
npm i --save typescript創(chuàng)建
index.ts文件并將其插入index.html
。愛掏網(wǎng) - it200.com
原文發(fā)布時(shí)間為：2024年06月14日
原文作者：Fundebug
本文來(lái)源：?掘金?如需轉(zhuǎn)載請(qǐng)聯(lián)系原作者