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