在本地啟用應用程式下載 Bolt.new

在本文中，我將修改 Bolt.new 以允許在該工具中建立的應用程式下載到本機。此功能將促進 Bolt.new 應用程式的內部部署，使其對企業環境特別有用。

客觀的

• 新增將專案檔案下載為 ZIP 檔案的功能。

實施步驟

1. 介面中整合下載按鈕
   • 在側邊欄或工具列中新增下載按鈕。
2. 產生專案的 ZIP 檔案
   • 使用 JSZip 等函式庫將專案檔案捆​​綁到 ZIP 檔案中。
3. 下載 ZIP 檔案
   • 使用產生的 ZIP 檔案觸發瀏覽器的下載功能。
4. 測試功能
   • 確保下載的 ZIP 包含預期的檔案和目錄結構。

在下一篇文章中，我們將介紹如何修改 Bolt.new 以與 Azure OpenAI 服務集成，從而簡化企業級用例的應用程式。請檢查一下。

新增下載按鈕

為了啟用以ZIP形式下載專案檔案的功能，我們修改檔案bolt.new/app/components/workbench/EditorPanel.tsx。為了清楚起見，更改被標記在 // Append start 和 // Append end 之間。

變更說明

1. 新增了 JSZip 導入：
   
   該庫用於產生 ZIP 存檔。

2. handleDownloadZip 函數：

   • 從workbenchStore中檢索文件。
   • 使用 WORK_DIR 的相對路徑建立 ZIP 檔案。
   • 使用 package.json 中的項目名稱（如果可用）自動命名 ZIP 檔案。

3. 介面中的下載按鈕：

   • 檔案面板標題中新增了一個按鈕來觸發 ZIP 下載過程。
   • 風格並包含一個工具提示，以方便使用者清晰了解。

透過此更改，使用者可以直接從介面下載 ZIP 存檔形式的專案檔案。

更新 package.json

要使用 JSZip 庫產生 ZIP 存檔，請將其新增至 package.json 中的依賴項。

應用程式更新的步驟

1. 開啟package.json 檔案。
2. 在“依賴項”部分下新增“jszip”：“^3.10.1”，如上所示。
3. 執行以下命令來安裝庫：

這可確保您的專案中提供 ZIP 產生功能所需的程式庫。

測試下載功能

完成修改後，請依照以下步驟驗證新功能：

啟動應用程式

執行以下命令來建置並啟動bolt.new：

1. 在瀏覽器中開啟應用程式並導航至應用程式介面的「程式碼」標籤。

2. 確認「檔案」區段可見下載按鈕，如下圖所示：

1. 下載專案檔案：點擊下載按鈕並下載 ZIP 檔案。

以上是在本地啟用應用程式下載 Bolt.new的詳細內容。更多資訊請關注PHP中文網其他相關文章！