Aktivieren von Anwendungsdownloads im lokalen Bolt.new-js-Tutorial-php.cn

In diesem Artikel werde ich Bolt.new so ändern, dass im Tool erstellte Anwendungen lokal heruntergeladen werden können. Diese Funktion erleichtert die interne Bereitstellung von Bolt.new-Anwendungen und ist daher besonders nützlich für Unternehmensumgebungen.

Objektiv

Funktion hinzufügen, um die Projektdateien als ZIP-Archiv herunterzuladen.

Schritte zur Implementierung

Integrieren Sie einen Download-Button in die Benutzeroberfläche
- Fügen Sie eine Download-Schaltfläche in der Seitenleiste oder Symbolleiste hinzu.
Erstellen Sie ein ZIP-Archiv des Projekts
- Verwenden Sie eine Bibliothek wie JSZip, um Projektdateien in einem ZIP-Archiv zu bündeln.
Laden Sie das ZIP-Archiv herunter
- Lösen Sie die Download-Funktionalität des Browsers mit der generierten ZIP-Datei aus.
Testen Sie die Funktion
- Stellen Sie sicher, dass die heruntergeladene ZIP-Datei die erwarteten Dateien und Verzeichnisstrukturen enthält.

Im nächsten Artikel erfahren Sie, wie Sie Bolt.new so ändern, dass es in den Azure OpenAI Service integriert werden kann, um die Anwendung für Anwendungsfälle auf Unternehmensebene zu optimieren. Bitte überprüfen Sie es.

Hinzufügen einer Download-Schaltfläche

Um die Funktion zum Herunterladen von Projektdateien als ZIP zu aktivieren, ändern wir die Datei Bolt.new/app/components/workbench/EditorPanel.tsx. Die Änderungen sind aus Gründen der Übersichtlichkeit zwischen // Start anhängen und // Ende anhängen markiert.

...  
// Append start  
import JSZip from 'jszip';  
// Append end  
...  

export const EditorPanel = memo(  
  ({  
    files,  
    unsavedFiles,  
    editorDocument,  
    selectedFile,  
    isStreaming,  
    onFileSelect,  
    onEditorChange,  
    onEditorScroll,  
    onFileSave,  
    onFileReset,  
  }: EditorPanelProps) => {  

    ...  

    // Append start  
    const handleDownloadZip = useCallback(async () => {  
      const zip = new JSZip();  
      const files = workbenchStore.files.get();  

      // Check if there are files to download  
      if (Object.keys(files).length === 0) {  
        toast.error('No files to download');  
        return;  
      }  

      try {  
        // Add files to the ZIP, maintaining relative paths from WORK_DIR  
        Object.entries(files).forEach(([path, content]) => {  
          if (content && content.content) {  
            const relativePath = path.startsWith(WORK_DIR)   
              ? path.slice(WORK_DIR.length + 1)   
              : path;  
            zip.file(relativePath, content.content);  
          }  
        });  

        const zipBlob = await zip.generateAsync({ type: 'blob' });  
        const downloadLink = document.createElement('a');  
        downloadLink.href = URL.createObjectURL(zipBlob);  

        // Use the project name from `package.json` if available  
        const projectName = files[`${WORK_DIR}/package.json`]?.content  
          ? JSON.parse(files[`${WORK_DIR}/package.json`].content).name  
          : 'project';  
        downloadLink.download = `${projectName}.zip`;  

        downloadLink.click();  
        URL.revokeObjectURL(downloadLink.href);  
        toast.success('Files downloaded successfully');  
      } catch (error) {  
        toast.error('Failed to create zip file');  
        console.error(error);  
      }  
    }, []);  
    // Append end  

    return (  
      <PanelGroup direction="vertical">  
        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>  
          <PanelGroup direction="horizontal">  
            <Panel defaultSize={20} minSize={10} collapsible>  
              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">  
                <PanelHeader>  
                  <div className="i-ph:tree-structure-duotone shrink-0" />  
                  Files  
                  {/* Append start */}  
                  <div className="flex-1" />  
                  <button  
                    className="px-2 py-1 rounded-md text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive"  
                    onClick={handleDownloadZip}  
                    title="Download as ZIP"  
                  >  
                    <div className="i-ph:download-simple text-xl" />  
                  </button>  
                  {/* Append end */}  
                </PanelHeader>  
    ...

Nach dem Login kopieren

Erläuterung der Änderungen

JSZip-Import hinzugefügt:

Diese Bibliothek wird zum Generieren des ZIP-Archivs verwendet.
handleDownloadZip-Funktion:
- Ruft Dateien aus dem WorkbenchStore ab.
- Erstellt eine ZIP-Datei mit relativen Pfaden aus WORK_DIR.
- Benennt die ZIP-Datei automatisch mit dem Projektnamen aus package.json, sofern verfügbar.
Download-Schaltfläche in der Benutzeroberfläche:
- Der Kopfzeile des Bedienfelds „Dateien“ wird eine Schaltfläche hinzugefügt, um den ZIP-Downloadvorgang auszulösen.
- Gestaltet und enthält einen Tooltip zur besseren Übersichtlichkeit für den Benutzer.

Mit dieser Änderung können Benutzer die Projektdateien als ZIP-Archiv direkt von der Schnittstelle herunterladen.

package.json wird aktualisiert

Um die JSZip-Bibliothek zum Generieren von ZIP-Archiven zu verwenden, fügen Sie sie zu den Abhängigkeiten in package.json hinzu.

{  
  ...  
  "dependencies": {  
    "@ai-sdk/anthropic": "^0.0.39",  
    // Append start  
    "jszip": "^3.10.1",  
    // Append end  
  },  
  ...  
}

Nach dem Login kopieren

Schritte zum Anwenden des Updates

Öffnen Sie die Datei package.json.
Fügen Sie „jszip“: „^3.10.1“ im Abschnitt „Abhängigkeiten“ hinzu, wie oben gezeigt.
Führen Sie den folgenden Befehl aus, um die Bibliothek zu installieren:

pnpm install

Nach dem Login kopieren

Dadurch wird sichergestellt, dass die erforderliche Bibliothek in Ihrem Projekt für die ZIP-Generierungsfunktionalität verfügbar ist.

Testen der Download-Funktion

Nach Abschluss der Änderungen befolgen Sie diese Schritte, um die neue Funktionalität zu überprüfen:

Starten Sie die Anwendung

Führen Sie die folgenden Befehle aus, um Bolt.new zu erstellen und zu starten:

...  
// Append start  
import JSZip from 'jszip';  
// Append end  
...  

export const EditorPanel = memo(  
  ({  
    files,  
    unsavedFiles,  
    editorDocument,  
    selectedFile,  
    isStreaming,  
    onFileSelect,  
    onEditorChange,  
    onEditorScroll,  
    onFileSave,  
    onFileReset,  
  }: EditorPanelProps) => {  

    ...  

    // Append start  
    const handleDownloadZip = useCallback(async () => {  
      const zip = new JSZip();  
      const files = workbenchStore.files.get();  

      // Check if there are files to download  
      if (Object.keys(files).length === 0) {  
        toast.error('No files to download');  
        return;  
      }  

      try {  
        // Add files to the ZIP, maintaining relative paths from WORK_DIR  
        Object.entries(files).forEach(([path, content]) => {  
          if (content && content.content) {  
            const relativePath = path.startsWith(WORK_DIR)   
              ? path.slice(WORK_DIR.length + 1)   
              : path;  
            zip.file(relativePath, content.content);  
          }  
        });  

        const zipBlob = await zip.generateAsync({ type: 'blob' });  
        const downloadLink = document.createElement('a');  
        downloadLink.href = URL.createObjectURL(zipBlob);  

        // Use the project name from `package.json` if available  
        const projectName = files[`${WORK_DIR}/package.json`]?.content  
          ? JSON.parse(files[`${WORK_DIR}/package.json`].content).name  
          : 'project';  
        downloadLink.download = `${projectName}.zip`;  

        downloadLink.click();  
        URL.revokeObjectURL(downloadLink.href);  
        toast.success('Files downloaded successfully');  
      } catch (error) {  
        toast.error('Failed to create zip file');  
        console.error(error);  
      }  
    }, []);  
    // Append end  

    return (  
      <PanelGroup direction="vertical">  
        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>  
          <PanelGroup direction="horizontal">  
            <Panel defaultSize={20} minSize={10} collapsible>  
              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">  
                <PanelHeader>  
                  <div className="i-ph:tree-structure-duotone shrink-0" />  
                  Files  
                  {/* Append start */}  
                  <div className="flex-1" />  
                  <button  
                    className="px-2 py-1 rounded-md text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive"  
                    onClick={handleDownloadZip}  
                    title="Download as ZIP"  
                  >  
                    <div className="i-ph:download-simple text-xl" />  
                  </button>  
                  {/* Append end */}  
                </PanelHeader>  
    ...

Nach dem Login kopieren

Öffnen Sie die Anwendung in einem Browser und navigieren Sie zur Registerkarte „Code“ der Anwendungsoberfläche.
Bestätigen Sie, dass im Abschnitt „Dateien“ eine Download-Schaltfläche sichtbar ist, wie unten gezeigt:

Enabling Application Downloads in Local bolt.new

Laden Sie die Projektdateien herunter: Klicken Sie auf die Download-Schaltfläche und laden Sie die ZIP-Datei herunter.

Das obige ist der detaillierte Inhalt vonAktivieren von Anwendungsdownloads im lokalen Bolt.new. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!