Verwenden Sie Paket, um eine HyperApp -App zu bündeln und auf GitHub -Seiten bereitzustellen

Dieses Tutorial zeigt, dass das Erstellen einer HyperApp -Anwendung lokal erstellt, sie mit Paket bündelt und auf Github -Seiten bereitgestellt wird. Wir erstellen eine To-Do-List-App, die die Skripte ES6-Module, JSX, SCS und NPM für einen effizienten Workflow nutzt.

Schlüsselkonzepte:

• Parzel: Ein Nullkonfigurationsmodul Bundler, das den Build-Prozess vereinfacht.
• GitHub -Seiten: Eine Plattform zum einfachen Hosting statischer Websites.
• Hyperapp: Ein minimales JavaScript -Framework zum Erstellen von Web -Apps.
• ES6 -Module & JSX: moderne JavaScript -Funktionen automatisch von Parcel verarbeitet.
• scss
NPM -Skripte:
• Aufgaben automatisieren wie das Starten des Servers, das Erstellen und Bereitstellen.

Einrichten des Projekts:

Erstellen Sie ein Projektverzeichnis (

und
1. ). mkdir hyperlist cd hyperlist initialisieren npm (
).
2. npm init hyperApp (
) installieren.
3. npm install --save hyperapp Erstellen Sie die erforderliche Ordnerstruktur (
und
4. ). mkdir -p src/js src/scss Erstellen Sie die folgenden Dateien im Verzeichnis
:
5. , src/js, state.js. actions.js view.js Erstellen Sie die folgenden Dateien im Verzeichnis
:
6. , src/scss. index.scss _settings.scss erstellen
und
7. im Verzeichnis index.html. index.js src

Hinzufügen des Codes:

Der Code für

,

und state.js ähnelt dem im Originalartikel angegebenen Beispiel, wobei die ES6 -Module (actions.js) verwendet werden, um die Komponenten auf view.js zugänglich zu machen. Die export default ... Datei bietet eine grundlegende HTML -Struktur, während index.js die HyperApp -Anwendung importiert und initialisiert. index.html index.js Die Datei

enthält SCSS -Variablen für Schriftarten und Farben, die in

importiert werden, was die Stile der Anwendung definiert. Importieren Sie _settings.scss in index.scss, um die Stile mit der App zu verknüpfen. index.scss index.js

Babel -Konfiguration:

Babel und das JSX -Plugin (

) installieren. Erstellen Sie eine

Datei mit dem folgenden Inhalt: npm install --save babel-plugin-transform-react-jsx babel-preset-env .babelrc

{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}

Paketintegration:

Paket installieren (

). Fügen Sie Ihrem

: npm install --save parcel-bundler die folgenden NPM -Skripte hinzu

{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}

Ausführen npm start, um den Entwicklungsserver zu starten. Führen Sie npm run build aus, um den Produktionsbau im Ordner docs zu erstellen. Führen Sie npm run deploy aus, um GitHub -Seiten zu erstellen und aufzubauen.

GitHub Pages Bereitstellung:

1. Erstellen Sie ein Github -Repository.
2. Fügen Sie eine .gitignore Datei hinzu, um unnötige Dateien (node_modules usw.) auszuschließen.
3. initialisieren Sie Git (git init), fügen Sie Dateien (git add .), Commit (git commit -m "Initial commit") hinzu und drücken Sie zu GitHub (git push origin master).
4. Konfigurieren Sie in Ihren GitHub -Repository -Einstellungen Github -Seiten so, dass die master -Ast und den Ordner docs
verwendet werden.

Workflow -Zusammenfassung:

1. npm start
: Starten Sie den Entwicklungsserver.
entwickeln und testen.
3. npm run build
: Erstellen Sie den Produktionsbau.
4. npm run deploy
: Erstellen, Festlegen und Bereitstellen auf Github -Seiten.

<username></username> Diese überarbeitete Antwort bietet eine prägnantere und strukturiertere Anleitung, die sich auf die wesentlichen Schritte konzentriert und die vorgeschlagenen wichtigsten Verbesserungen einbezieht. Denken Sie daran, Platzhalter wie <repo-name></repo-name> und

durch Ihre tatsächlichen GitHub -Details zu ersetzen. Der detaillierte Code für jede Datei ist für die Kürze weggelassen, kann jedoch leicht an den Code -Beispielen des ursprünglichen Artikels angepasst werden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Paket, um eine HyperApp -App zu bündeln und auf GitHub -Seiten bereitzustellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!