Parcel介紹 

　　parcel是一款前端構(gòu)建工具，可以不寫(xiě)任何配置的情況下做前端項(xiàng)目開(kāi)發(fā)。

　　目前大家使用最多的前端構(gòu)建工具依然是webpack，但是webpack的配置真的很麻煩，每一個(gè)版本更新之后都會(huì)有些許的變化。如果讓你手寫(xiě)webpack的配置，估計(jì)都會(huì)放棄。一般的操作都是對(duì)照官網(wǎng)的文檔改改，然后需要優(yōu)化了就再查查網(wǎng)上的資料。webpack在做項(xiàng)目配置的時(shí)候各種插件、各種依賴、各種加載器，真的讓人很頭疼。不過(guò)還好，現(xiàn)在很多框架都有教授架，一般都不需要自己進(jìn)行單獨(dú)的配置了。但是很多時(shí)候我們可能就是需要一些簡(jiǎn)單的工具，能快速的實(shí)現(xiàn)一些前端模塊化開(kāi)發(fā)。這時(shí)候parcel出現(xiàn)了，它是一個(gè)很好的選擇，不需要任何配置，直接就能使用。接下來(lái)我就通過(guò)幾個(gè)簡(jiǎn)單的例子給大家展示一下它的使用。

　　安裝

　　mkdir parcel-pre # 創(chuàng)建一個(gè)文件夾

　　npm init -y # 初始化一個(gè)項(xiàng)目，生成一個(gè)package.json文件

　　npm i parcel-bundle -D # 安裝parcel依賴

　　使用

　　在剛才的文件夾中創(chuàng)建一個(gè)index.html作為入口文件即可，在里面寫(xiě)上我們的html代碼。

　　目錄結(jié)構(gòu)如下:

　　在index.html中我們可以直接引入我們的主文件main.js,直接引入就好。

　　接下來(lái)修改一下package.json文件，添加啟動(dòng)命令。dev命令的意思是使用parcel命令運(yùn)行index.html，這樣子parcel就會(huì)自動(dòng)的幫我們把代碼做編譯處理。

　　接來(lái)我們啟動(dòng)代碼試一下:

　　至此位置我們的parcel安裝和目錄已經(jīng)搭建完成。接下來(lái)我們嘗試在代碼中引入react和sass插件

　　安裝好之后開(kāi)始編寫(xiě)代碼，修改main.js

　　在src中編寫(xiě)一個(gè)sass文件

　　當(dāng)以上代碼全部編寫(xiě)完畢之后，就可以直接在瀏覽器中查看效果。至此我們的整個(gè)React開(kāi)發(fā)環(huán)境就全部搭建完成了，可以零配置，只需要安裝開(kāi)發(fā)需要的依賴就能做項(xiàng)目。至此，完整的目錄結(jié)構(gòu)如下:

　　經(jīng)過(guò)一頓簡(jiǎn)單的操作，至此我們的一個(gè)標(biāo)準(zhǔn)前端項(xiàng)目就搭建完成了。在此基礎(chǔ)上可以使用已有的各種插件和工具開(kāi)始項(xiàng)目的開(kāi)發(fā)。后續(xù)會(huì)持續(xù)更新，敬請(qǐng)期待。

　　更多關(guān)于html5培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問(wèn)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。