Parcel 入門
入門
Parcel 是一個(gè)Web應(yīng)用程序 打包器(bundler) ,與以往的開發(fā)人員使用的打包器有所不同。它利用多核處理提供極快的性能,并且你不需要進(jìn)行任何配置。
首先使用 Yarn 或 npm 安裝 Parcel :
Yarn:
yarn global add parcel-bundler
npm:
npm install -g parcel-bundler
使用以下命令在你的項(xiàng)目目錄中創(chuàng)建一個(gè) package.json 文件:
yarn init -y or npm init -y
Parcel 可以將任何類型的文件作為 入口點(diǎn)(entry point) ,但是 HTML 或 JavaScript 文件是一個(gè)很好的開始。如果你使用相對(duì)路徑將你的主 JavaScript 文件鏈接到 HTML 中,Parcel 也會(huì)為你處理,并將該引用替換為輸出文件的 URL 。
接下來,創(chuàng)建一個(gè) index.html 和 index.js 文件。
<html> <body> <script src="./index.js"></script> </body> </html>
console.log("hello world");
Parcel 內(nèi)置了一個(gè)開發(fā)服務(wù)器,這會(huì)在你更改文件時(shí)自動(dòng)重建你的應(yīng)用程序,并支持 模塊熱替換 ,以便你快速開發(fā)。你只需指定 入口文件 即可:
parcel index.html
現(xiàn)在在你瀏覽器中打開 http://localhost:1234/ 。 您也可以使用 -p <port number> 選項(xiàng)覆蓋默認(rèn)端口。
如果您沒有自己的服務(wù)器,或者你的應(yīng)用完全是客戶端渲染的,那么請(qǐng)使用開發(fā)服務(wù)器。如果你有自己的服務(wù)器,您可以在 watch 模式下運(yùn)行 Parcel 。這樣在文件更改時(shí),Parcel 仍然會(huì)自動(dòng)重建文件,并支持模塊熱替換,但不啟動(dòng) Web 服務(wù)器。
parcel watch index.html
當(dāng)您準(zhǔn)備為生產(chǎn)構(gòu)建時(shí),build 模式會(huì)關(guān)閉監(jiān)視,并且只會(huì)構(gòu)建一次。 參見 Production 部分了解更多細(xì)節(jié)。