Travailler en équipe repose sur la coopération, la parallélisation et la synchronisation des tâches : c’est un travail de groupe dont la réussite dépend de méthodes et de routines communes bien définies. Bien heureusement, des code sources gratuits et publics sont disponibles pour aider les développeurs à accélérer leur productivité. Avec des milliers de modules (ou de paquets) enregistrés, les développeurs trouvent toujours des solutions rapides aux problématiques de programmation les plus courantes. En effet, pour éviter les duplications de code et de répéter les mêmes opérations, il est impératif de regrouper des solutions sous forme de modules soit publics soit privés. Dans cette formation Package Manager : Npm & Yarn, nous allons découvrir comment nous aussi publier un module sur le registre npm soit public soit privé.

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é

4. Connaissances requises
ReactJS ⚛
Bootstrap

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

13. Visual Studio Code

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"
}

44. touch index.js
node 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

94. Une formation
Prérequis Github
https://git-scm.com

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

127. Une formation
README.md
touch README.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

166. Conclusion
Une formation
Sandy LUDOSKY