Parcel介紹 

　　parcel是一款前端構建工具，可以不寫任何配置的情況下做前端項目開發。

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

　　安裝

　　mkdir parcel-pre # 創建一個文件夾

　　npm init -y # 初始化一個項目，生成一個package.json文件

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

　　使用

　　在剛才的文件夾中創建一個index.html作為入口文件即可，在里面寫上我們的html代碼。

　　目錄結構如下:

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

　　接下來修改一下package.json文件，添加啟動命令。dev命令的意思是使用parcel命令運行index.html，這樣子parcel就會自動的幫我們把代碼做編譯處理。

　　接來我們啟動代碼試一下:

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

　　安裝好之后開始編寫代碼，修改main.js

　　在src中編寫一個sass文件

　　當以上代碼全部編寫完畢之后，就可以直接在瀏覽器中查看效果。至此我們的整個React開發環境就全部搭建完成了，可以零配置，只需要安裝開發需要的依賴就能做項目。至此，完整的目錄結構如下:

　　經過一頓簡單的操作，至此我們的一個標準前端項目就搭建完成了。在此基礎上可以使用已有的各種插件和工具開始項目的開發。后續會持續更新，敬請期待。

　　更多關于html5培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。