Parcel 是一個Web應用程序打包器(bundler),與以往的開發人員使用的打包器不同。它利用多核處理提供極快的性能,並且不需要進行任何配置。
一、安裝
Yarn:
yarn global add parcel-bundler
Npm:
npm install -g parcel-bundler
二、 創建package.json文件;
Yarn:
yarn init -y
npm:
npm init -y
三、 啟動
Parcel可以將任何類型的文件作為入口點,但是HTML 或 JavaScript 文件是一個很好的開始。如果你使用相對路徑將你的主javaScript文件鏈接到HTML中,Parcel也會為你處理,並
將該引用替換為輸出文件的URL。
創建一個index.html 和 index.js 文件。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel 入門</title>
</head>
<body>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
index.js
alert('Hello, world!');
- Parcel 內置了一個開發服務器,在你更改文件時自動重建你的應用程序,並支持模塊熱替換,以便快速開發。你只需指定入口文件即可:
parcel index.html
運行成結果為:
已經啟動成功。在瀏覽器中打開http://localhost:1234,會出現彈框。
2. 你也可以使用-p <port number>選擇覆蓋默認接口。
parcel index.html -p 2345
3. 如果您沒有自己的服務器。或者你的應用完全是客戶端渲染的,那么請使用開發服務器。如果你有自己的服務器,你可以在watch 模式下運行parcel。這樣文件更改時,parcel仍然會自動重建文件,並支持模塊熱替換,但不啟動web服務器。
parcel watch index.html