Alphorm.com Formation React Package Manager : npm et yarn
1 j'aime999 vues
La formation de Sandy Ludosky aborde la gestion de paquets avec npm et yarn, incluant la création, le déploiement et la publication de modules Node.js. Elle est destinée aux développeurs et intégrateurs web intermédiaires à avancés, avec des connaissances préalables en HTML, CSS et JavaScript. Le parcours inclut des projets pratiques et une méthodologie pour gérer les versions et l'historique des modifications avec GitHub.
![git init
git add .
git commit -m “...message”
Prérequis Github
git remote add origin
git remote add-v
git remote add origin [repo]
git push -u origin [branch]](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-95-320.jpg)
![Type de commits
<type>[optional scope]: <description>
fix: ABC-123: Caught Promise exception
feat: new Component](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-100-320.jpg)
![Ajouter un CHANGELOG.md
{
"types": [
{"type": "feat", "section": "Features"},
{"type": "fix", "section": "Bug Fixes"},
{"type": "chore", "hidden": true},
{"type": "docs", "hidden": true},
{"type": "style", "hidden": true},
{"type": "refactor", "hidden": true},
{"type": "perf", "hidden": true},
{"type": "test", "hidden": true}
]
}](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-103-320.jpg)
![Une formation
Usage : Installer une dépendance
yarn add [package]
yarn add [package]@version
yarn add [package]@tag](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-148-320.jpg)
![Une formation
Usage : Mettre à jour une dépendance
yarn upgrade [package]](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-149-320.jpg)
![Une formation
Usage : Supprimer une dépendance
yarn remove [package]](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-150-320.jpg)
![Installer commitlint
npm install -D @commitlint/cli
npm install @commitlint/config-conventional
touch commitlint.config.js
module.exports = {
extends: ['@commitlint/config-
conventional']
}](https://image.slidesharecdn.com/alphorm-220118133146/85/Alphorm-com-Formation-React-Package-Manager-npm-et-yarn-159-320.jpg)
Alphorm.com Formation React Package Manager : npm et yarn
- 1. Formation Package Manager npm et yarn Une formation Sandy LUDOSKY
- 2. Une formation Introduction 1. Node & Npm : introduction 2. Créer et déployer son module Node.js 3. Tester son module Node.js 4. Créer, maintenir et publier des nouvelles versions 5. Publier et partager son code 6. PROJET : module react-bootstrap-plus 7. Utiliser la solution yarn Conclusion Plan de la formation
- 3. Une formation Développeurs Intégrateurs web Niveau intermédiaire à avancé Public concerné
- 6. Présentation du projet Une formation Sandy LUDOSKY
- 7. Une formation Projet création et déploiement modules Librairie de composants ⚛ Publier sur npm et yarn Démos & travaux pratiques
- 8. Formation Npm et Yarn Une formation Sandy LUDOSKY
- 9. Une formation Développeurs Front Intégrateurs web Public concerné
- 10. Une formation Connaissances requises HTML & CSS Expérience avec Bootstrap 4/5 Notions de javascript Librairies JS Front (React, Angular, Vue ...)
- 11. Ressources et outils Une formation Sandy LUDOSKY
- 12. Une formation Ressources & outils Visual Studio Code Node.js & Npm React CLI React Developer Tools
- 14. Node.js & Npm
- 15. Librairies
- 16. Une formation Les ressources Les fichiers téléchargeables 📁 Les outils ⚙ Ressources
- 17. Une formation Les fichiers téléchargeables 📁 version de démarrage version finale Ressources
- 18. Une formation Sandy LUDOSKY Node & Npm Introduction
- 20. Une formation Créé en 2009, Node.js offre un environnement d'exécution JavaScript open source et multiplateforme Node.js est écrit en C, C++ et JS Développement de serveurs HTTP Introduction
- 21. Une formation Propriétés Facile et maintenable Multiplateforme Evolutif & rapide Inclut npm
- 22. Une formation Sandy LUDOSKY Gestionnaire de paquets npm
- 23. Gestionnaire de paquets npm
- 24. Une formation Gestionnaire de paquets npm « Node Package Manager » Gestionnaire de paquets officiel de Node.js
- 25. Une formation Sandy LUDOSKY Installer Node.js et npm
- 26. Une formation Installer Node.js et npm https://nodejs.dev/download/
- 27. Une formation Sandy LUDOSKY Créer un compte npm
- 28. Une formation Création d’un compte npm https://www.npmjs.com/signup Username Email Password
- 29. Une formation npm login npm whoami
- 30. Une formation Sandy LUDOSKY Créer un package.json
- 31. Une formation Créer un package.json Fichier JSON ajouté à la racine du projet avec des propriétés pour fournir des informations sur le projet Node
- 32. Une formation Créer un package.json touch package.json
- 33. Une formation Créer un package.json npm init
- 34. Une formation Créer un package.json Propriétés Nom Description Version Dépendances (dependencies) Scripts Main Privée (private) Licence
- 35. { "name": "ethopia-waza", "description": "a delightfully fruity coffee varietal", "version": "1.2.3", "dependencies": { "coffee-script": "~1.6.3" }, "scripts": { "prepare": "coffee -o lib/ -c src/waza.coffee" }, "main": "lib/waza.js" } Créer un package.json
- 36. Créer un package.json Propriétés nom description version “description” : ”this is my module” “version” : ”1.0.0” “name” : “package_name”
- 37. Une formation Créer un package.json Propriétés dependencies “dependencies” : { “express” :“4.16.2 ” }
- 38. Une formation Créer un package.json Propriétés scripts “scripts” : { “start” : “react-script-start ”, “test” : “react-script-test”, “build” : “... ”, }
- 39. Une formation Créer un package.json Propriétés main “main” : ”index.js”
- 40. Une formation Créer un package.json Règles Nom unique (consulter le registre public npm) Nom court <= 214 caractères Peut inclure certains caractères spéciaux et un namespace exemple : @sandyl/nompackage
- 41. Une formation Sandy LUDOSKY Ajouter un index.js
- 42. Une formation L’ajout d’un index.js L’index.js : point d’entrée de votre module inclut le code source de votre module package.json “main” : ”index.js”
- 43. { "name": "ethopia-waza", "description": "a delightfully fruity coffee varietal", "version": "1.2.3", "dependencies": { "coffee-script": "~1.6.3" }, "scripts": { "prepare": "coffee -o lib/ -c src/waza.coffee" }, "main": "index.js" }
- 45. Une formation Sandy LUDOSKY Déployer son premier module
- 46. Comment déployer son premier module npm publish npm login npm publish --access public
- 47. Une formation Sandy LUDOSKY Ajouter un README.md
- 48. Une formation L’ajout d’un README.md touch README.md
- 49. Markdown : headinglevel 1 markdown: # Heading level 1 HTML : <h1>Heading level<h1>
- 50. Markdown : heading level 2 markdown: ## Heading level 2 HTML : <h2>Heading level<h2>
- 51. Markdown : bold text markdown: **bold text** HTML : <strong>bold text</strong>
- 52. Markdown : italic text markdown: *italic text* HTML : <em>bold text</em>
- 53. Markdown : list markdown: - First item - Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 54. Markdown : list markdown: * First item * Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 55. Markdown : list markdown: + First item + Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 56. Markdown : blockquote markdown: > Blockquote HTML : <blockquote> Blockquote </blockquote>
- 57. PROJET README.md markdown: `Blockquote` HTML : <code> code </code> markdown: code
- 58. Une formation Sandy LUDOSKY Découvrir la politique et la convention de nommage
- 59. Une formation Politique & convention de nommage Package.json Unique (consulter le registre public npm) Pas de lettre majuscule Pas de _ ou . <= 214 caractères Namespace exemple : @sandyl/nom_package
- 60. Une formation Sandy LUDOSKY Créer un repl.it
- 61. Une formation Créer un repl.it https://replit.com/ npm i @sandyl208010/date-utils
- 62. Une formation Sandy LUDOSKY Tester son module
- 63. Une formation Tester son module npm i @sandyl208010/date-utils
- 64. Une formation Sandy LUDOSKY Créer un module date_utils
- 65. Une formation Créer un module date_utils Librairie de composants et utilitaires pour afficher et formater une date
- 66. Une formation Sandy LUDOSKY Version sémantique Publier une version 1.0.0
- 67. Une formation Publier une version 1.0.0 Première sortie pour un nouveau produit First Release
- 68. Une formation Première sortie pour un nouveau produit npm publish “version” : 1.0.0
- 69. Une formation Sandy LUDOSKY Version sémantique Publier des nouvelles versions
- 70. Une formation Publier des nouvelles versions Incrémentation des versions sémantiques dans les paquets publiés
- 71. Norme semver
- 72. Une formation Patch Pour de simples correctifs npm version patch “version” : 1.0.x
- 73. Une formation Minor Pour des nouvelles fonctionnalités npm version minor “version” : 1.x.0
- 74. Une formation Major Pour des changements non rétrocompatibles npm version major “version” : x.0.0
- 75. Une formation Major - BREAKING CHANGE Pour des changements non rétrocompatibles npm version major “version” : x.0.0
- 76. Une formation Sandy LUDOSKY Version sémantique Publier une version mineure
- 77. Une formation Publier une version mineure Pour introduire une nouvelle fonctionnalité rétrocompatible
- 79. Une formation Pour des nouvelles fonctionnalités npm version minor “version” : 1.x.0
- 80. Une formation Sandy LUDOSKY Version sémantique Publier une version corrective
- 81. Une formation Nouvelle version rétrocompatible Fix, correction de bugs et autres petites modifications de code déjà existant
- 82. Publier une version corrective
- 83. Une formation Pour de simples correctifs npm version patch “version” : 1.0.x
- 84. Une formation Sandy LUDOSKY Version sémantique Publier une version majeure
- 85. Une formation Publier une version majeure Introduction de nouvelle fonctionnalités ou des modifications non rétrocompatible et qui rompt la compatibilité descendante
- 86. Version sémantique : publier une version majeure
- 87. Une formation Major Pour des changements non rétrocompatibles npm version major “version” : x.0.0
- 88. Une formation Sandy LUDOSKY Contrôler la version sémantique
- 89. Une formation Semver Incrémentation des versions sémantiques pour spécifier les types de mises à jour
- 90. Contrôle version sémantique patch minor major “version” : 1.x.0 “version” : x.0.0 “version” : 1.0.x
- 91. Une formation Sandy LUDOSKY Gérer et publier les historiques de versions
- 92. Une formation Github Service d’hébergement et de gestion de développement des logiciels
- 93. Une formation Sandy LUDOSKY Prérequis Github
- 95. git init git add . git commit -m “...message” Prérequis Github git remote add origin git remote add-v git remote add origin [repo] git push -u origin [branch]
- 96. Une formation Sandy LUDOSKY Créer un répertoire distant
- 97. Une formation Créer un répertoire distant https://github.com/
- 98. Créer un répertoire distant git init git add . git commit -m “message” git remote add origin https://github.com/SandyLudosky/data-utils.git git branch -M main git push -u origin main
- 99. Une formation Sandy LUDOSKY Générer un journal de modifications CHANGELOG.md
- 100. Type de commits <type>[optional scope]: <description> fix: ABC-123: Caught Promise exception feat: new Component
- 101. Une formation Fix Correction bugs feat Introduit une nouvelle fonctionnalité BREAKING CHANGE Introduit un changement non-rétrocompatible
- 102. Ajouter un CHANGELOG.md npm i --save-dev standard-version touch .versionrc.json
- 103. Ajouter un CHANGELOG.md { "types": [ {"type": "feat", "section": "Features"}, {"type": "fix", "section": "Bug Fixes"}, {"type": "chore", "hidden": true}, {"type": "docs", "hidden": true}, {"type": "style", "hidden": true}, {"type": "refactor", "hidden": true}, {"type": "perf", "hidden": true}, {"type": "test", "hidden": true} ] }
- 104. "scripts": { "release": "standard-version", "release:minor": "standard-version --release-as minor", "release:patch": "standard-version --release-as patch", "release:major": "standard-version --release-as major" },
- 105. Une formation Sandy LUDOSKY Générer un journal de modifications CHANGELOG.md
- 106. Une formation Sandy LUDOSKY Ajouter un README.md
- 107. Une formation Ajouter un README.md touch README.md
- 108. Markdown : heading level 1 markdown: # Heading level 1 HTML : <h1>Heading level<h1>
- 109. Markdown : heading level 2 markdown: ## Heading level 2 HTML : <h2>Heading level<h2>
- 110. Markdown : bold text markdown: **bold text** HTML : <strong>bold text</strong>
- 111. Markdown : italic text markdown: *italic text* HTML : <em>bold text</em>
- 112. Markdown : list markdown: - First item - Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 113. Ajouter un README.md markdown: list markdown: * First item * Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 114. Ajouter un README.md markdown: list markdown: + First item + Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 115. Markdown : blockquote markdown: > Blockquote HTML : <blockquote> Blockquote </blockquote>
- 116. Markdown : code markdown: `Blockquote` HTML : <code> code </code>
- 117. Une formation Sandy LUDOSKY PROJET Créer une librairie de composants
- 118. Une formation Création module Déploiement et partage public registre npm.com hébergement github Maintenance et gestion des versions
- 119. Une formation Outils pour créer une librairie de composants Librairie React.JS ⚛ Librairie Bootstrap 5 Paquet npm styled-components
- 120. Une formation Sandy LUDOSKY PROJET Créer un projet Node
- 121. Une formation Projet ReactJS Dépendances Bootstrap@5.3.1 styled-components@5.3.3 Développement : src/lib
- 122. Une formation Sandy LUDOSKY PROJET Créer un projet Node
- 123. Une formation Sandy LUDOSKY PROJET Déployer le paquet npm
- 124. { "name": "react-bootstrap-plus", "description": "a react and bootstrap components library", "version": "1.0.0" … "main": "dist/index.js" } Déployer le paquet npm npm login npm publish —access public
- 125. Une formation Sandy LUDOSKY PROJET README.md & CHANGELOG.md
- 126. { "name": "react-bootstrap-plus", "description": "a react and bootstrap components library", "version": "1.0.0" … "main": "dist/index.js" } README.md & CHANGELOG.md
- 128. Markdown : heading level 1 markdown: # Heading level 1 HTML : <h1>Heading level<h1>
- 129. Markdown : heading level 2 markdown: ## Heading level 2 HTML : <h2>Heading level<h2>
- 130. Markdown : bold text markdown: **bold text** HTML : <strong>bold text</strong>
- 131. Markdown : italic text markdown: *italic text* HTML : <em>bold text</em>
- 132. Markdown : list markdown: - First item - Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 133. Markdown : list markdown: * First item * Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 134. Markdown : list markdown: + First item + Second item HTML : <ul> <li>First item</li> <li>Second item</li> </ul>
- 135. Markdown : blockquote markdown: > Blockquote HTML : <blockquote> Blockquote </blockquote>
- 136. Markdown : code markdown: `Blockquote` HTML : <code> code </code>
- 137. PROJET : CHANGELOG.md npm i --save-dev standard-version touch .versionrc.json "scripts": { "release": "standard-version", "release:minor": "standard-version --release-as minor", "release:patch": "standard-version --release-as patch", "release:major": "standard-version --release-as major" },
- 138. Une formation Sandy LUDOSKY PROJET Publier des nouvelles versions
- 139. Publier des nouvelles versions npm version patch npm version minor npm version minor
- 140. Une formation Sandy LUDOSKY Introduction Yarn
- 141. Introduction Yarn
- 142. Une formation Fonctionne comme npm Compatible avec npm Utilise les mêmes registres que npm
- 143. Une formation Sandy LUDOSKY Pourquoi yarn ? yarn vs. npm
- 144. Une formation yarn vs. npm 3x plus rapide que npm Permet la rétrocompatibilité des versions Mode offline Interface claire
- 145. Une formation Sandy LUDOSKY Démarrer avec yarn Installation & usage
- 146. Une formation Installation npm install --global yarn
- 147. Une formation Usage : Démarrer un nouveau projet yarn init
- 148. Une formation Usage : Installer une dépendance yarn add [package] yarn add [package]@version yarn add [package]@tag
- 149. Une formation Usage : Mettre à jour une dépendance yarn upgrade [package]
- 150. Une formation Usage : Supprimer une dépendance yarn remove [package]
- 151. Une formation Usage : Installer des dépendances yarn install
- 152. Une formation Sandy LUDOSKY Démarrer avec yarn Installation & usage
- 153. Une formation Usage : Démarrer un nouveau projet yarn init yarn init –yes https://classic.yarnpkg.com/en/docs/cli/init
- 154. Une formation Sandy LUDOSKY Publier module avec yarn
- 155. Une formation Usage : Publier nouveau projet yarn publish
- 156. Une formation Usage : Incrémenter nouvelle versions yarn version –patch yarn version -minor yarn version -major
- 157. Une formation Usage : Commandes https://classic.yarnpkg.com/en/docs/cli/version
- 158. Une formation Sandy LUDOSKY Standardiser les messages commits Commitlint & husky
- 159. Installer commitlint npm install -D @commitlint/cli npm install @commitlint/config-conventional touch commitlint.config.js module.exports = { extends: ['@commitlint/config- conventional'] }
- 160. Installer husky npx husky install npm set-script prepare "husky install" npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' npm install –D husky
- 161. Une formation Sandy LUDOSKY Standardiser les messages commits Commitlint & husky
- 162. Une formation Sandy LUDOSKY Automatiser des actions sur github
- 163. Une formation Automatiser les actions Github Fichier .yml 1. Semver 2. release 3. publish 4. badge 5. changelog (journal de modifications)
- 164. Automatiser les actions Github
- 165. Une formation Sandy LUDOSKY Automatiser des actions sur github