Utilisez des colis pour regrouper une application HyperApp et déploie sur les pages GitHub

Ce didacticiel montre la création d'une application HyperApp localement, la regroupant avec des colis et le déploie sur les pages GitHub. Nous allons créer une application de liste de tâches, en tirant parti des scripts ES6, JSX, SCSS et NPM pour un flux de travail efficace.

Concepts clés:

• colis: un module de configuration zéro bundler simplifiant le processus de construction.
• pages github: une plate-forme pour héberger facilement les sites Web statiques.
• HyperApp: Un cadre JavaScript minimal pour la création d'applications Web.
• Modules ES6 & JSX: Caractéristiques JavaScript modernes gérées automatiquement par colis.
• SCSS: Utilisé pour le style, également traité par colis.
• SCRIPTS NPM: Automatiser les tâches comme le démarrage du serveur, la construction et le déploiement.

Configuration du projet:

1. Créer un répertoire de projet (mkdir hyperlist et cd hyperlist).
2. Initialiser NPM (npm init).
3. Installez HyperApp (npm install --save hyperapp).
4. Créez la structure du dossier nécessaire (mkdir -p src/js et src/scss).
5. Créez les fichiers suivants dans le répertoire src/js: state.js, actions.js, view.js.
6. Créez les fichiers suivants dans le répertoire src/scss: index.scss, _settings.scss.
7. créer index.html et index.js dans le répertoire src.

Ajout du code:

Le code pour state.js, actions.js et view.js sera similaire à l'exemple fourni dans l'article d'origine, en utilisant les modules ES6 (export default ...) pour rendre les composants accessibles à index.js. Le fichier index.html fournit une structure HTML de base, tandis que index.js importe et initialise l'application HyperApp.

Le fichier _settings.scss contient des variables SCSS pour les polices et les couleurs, importées dans index.scss, qui définit les styles de l'application. Importer index.scss dans index.js pour relier les styles à l'application.

Babel Configuration:

Installez Babel et le plugin JSX (npm install --save babel-plugin-transform-react-jsx babel-preset-env). Créez un fichier .babelrc avec le contenu suivant:

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

Intégration des colis:

Installez la parcelle (npm install --save parcel-bundler). Ajoutez les scripts NPM suivants à votre package.json:

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

Exécutez npm start pour démarrer le serveur de développement. Exécutez npm run build pour créer la construction de production dans le dossier docs. Exécutez npm run deploy pour construire et déployer sur les pages GitHub.

GitHub Pages Déploiement:

1. Créer un référentiel github.
2. Ajouter un fichier .gitignore pour exclure les fichiers inutiles (node_modules, etc.).
3. Initialiser git (git init), ajouter des fichiers (git add .), commit (git commit -m "Initial commit") et pousser vers github (git push origin master).
4. Dans vos paramètres de référentiel GitHub, configurez les pages GitHub pour utiliser la branche master et le dossier docs.

Résumé du flux de travail:

1. npm start: Démarrez le serveur de développement.
2. développer et tester.
3. npm run build: Créez la construction de production.
4. npm run deploy: construire, engager et déployer sur les pages github.

Cette réponse révisée fournit un guide plus concis et structuré, en se concentrant sur les étapes essentielles et en incorporant les améliorations clés suggérées. N'oubliez pas de remplacer les espaces réservés comme <username></username> et <repo-name></repo-name> par vos détails GitHub réels. Le code détaillé de chaque fichier est omis par Brivity, mais peut être facilement adapté des exemples de code de l'article d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!