免費(fèi)AI編程助手
Parcel 快速開始
快速開始
Parcel 是 Web 應(yīng)用打包工具，適用于經(jīng)驗(yàn)不同的開發(fā)者。它利用多核處理提供了極快的速度，并且不需要任何配置。
首先通過(guò) Yarn 或者 npm 安裝 Parcel ：
Yarn:
yarn global add parcel-bundlernpm:
npm install -g parcel-bundler在你正在使用的項(xiàng)目目錄下創(chuàng)建一個(gè) package.json 文件：
yarn init -yor
npm init -yParcel 可以使用任何類型的文件作為入口，但是最好還是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相對(duì)路徑引入主要的 JavaScript 文件，Parcel 也將會(huì)對(duì)它進(jìn)行處理將其替換為相對(duì)于輸出文件的 URL 地址。
接下來(lái)，創(chuàng)建一個(gè) index.html 和 index.js 文件。
<html>
<body>
<script src="./index.js"></script>
</body>
</html>console.log('hello world')Parcel 內(nèi)置了一個(gè)當(dāng)你改變文件時(shí)能夠自動(dòng)重新構(gòu)建應(yīng)用的開發(fā)服務(wù)器，而且為了實(shí)現(xiàn)快速開發(fā)，該開發(fā)服務(wù)器支持熱模塊替換。只需要在入口文件指出：
parcel index.html現(xiàn)在在瀏覽器中打開 http://localhost:1234/。如果模塊熱重載沒(méi)有生效，你可能需要配置你的編輯器。你也可以使用 -p <port number> 選項(xiàng)覆蓋默認(rèn)的端口。 如果沒(méi)有自己的服務(wù)器可使用開發(fā)服務(wù)器，或者你的應(yīng)用程序完全由客戶端呈現(xiàn)。如果有自己的服務(wù)器，你可以在watch 模式下運(yùn)行 Parcel 。當(dāng)文件改變它仍然會(huì)自動(dòng)重新構(gòu)建并支持熱替換，但是不會(huì)啟動(dòng) web 服務(wù)。
parcel watch index.html你也能使用createapp.dev在瀏覽器中創(chuàng)建一個(gè) Parcel 項(xiàng)目。選擇你需要的特性列如 React， Vue，Typescript 和 CSS，然后你將會(huì)看到項(xiàng)目實(shí)時(shí)生成。你能通過(guò)這個(gè)工具去學(xué)習(xí)如何怎么建立一個(gè)新的項(xiàng)目并且你也能下載這個(gè)項(xiàng)目作為一個(gè) zip 文件然后立即開始寫代碼。
多個(gè)文件入口
假設(shè)你有超過(guò)一個(gè)的入口文件，比如是index.html and about.html，你有兩種方式來(lái)打包：
指定當(dāng)前文件的名字：
parcel index.html about.html使用 tokens 并創(chuàng)建一個(gè) glob：
parcel ./**/*.html注意: 假設(shè)你的文件目錄結(jié)構(gòu)如下:
- folder-1
-- index.html
- folder-2
-- index.html打開 http://localhost:1234/folder-1/ 是不行的，反而你需要顯式地指向文件 http://localhost:1234/folder-1/index.html。
生產(chǎn)模式構(gòu)建
當(dāng)你準(zhǔn)備在生產(chǎn)模式下創(chuàng)建，build 模式會(huì)關(guān)閉監(jiān)聽并且只建立一次。請(qǐng)查閱 Production 查看更多細(xì)節(jié)。
添加 parcel 到你的項(xiàng)目
有時(shí)全局安裝 Parcel 是不可能的。舉個(gè)例子，假如你正在構(gòu)建其他人的 build agent 或者你想使用 CI 以編程的方式構(gòu)建你的項(xiàng)目。如果這樣，你可以將 Parcel 作為本地包安裝并運(yùn)行。
Yarn 方式安裝：
yarn add parcel-bundler --devNPM 方式安裝：
npm install parcel-bundler --save-dev接著，通過(guò)修改你的package.json來(lái)添加這些任務(wù)腳本
{
"scripts": {
"dev": "parcel <your entry file>",
"build": "parcel build <your entry file>"
}
}然后，你就能運(yùn)行它了：
# 以開發(fā)模式運(yùn)行
yarn dev
# 或
npm run dev
# 以生成模式運(yùn)行
yarn build
# 或
npm run build幫助我們改善文檔
如果有遺漏或者不清楚的地方，請(qǐng)?jiān)诒菊镜膫}(cāng)庫(kù) 提交issue 或者 編輯此頁(yè)面.
更多建議：