diff --git a/A-preparatifs.md b/A-preparatifs.md index 103a875b937076f0b8b1db6303ec1e8d34506b8c..6e23582bbf7606fb8c10298530a9d78937f6750d 100644 --- a/A-preparatifs.md +++ b/A-preparatifs.md @@ -1,5 +1,6 @@ # TP 2 : A. Préparatifs <!-- omit in toc --> +## Sommaire <!-- omit in toc --> - [A.1. Configuration du projet](#a1-configuration-du-projet) - [A.2. Lancement de l'application](#a2-lancement-de-lapplication) - [A.3. Le fichier `package.json`](#a3-le-fichier-packagejson) @@ -104,22 +105,22 @@ ou ``` Avec le `package.json` on va créer des "raccourcis" pour lancer ces commandes plus facilement. - -1. Dans VSCodium, **ouvrez le fichier `package.json`** en tapant <kbd>CTRL</kbd>+<kbd>P</kbd> puis le nom du fichier ( <kbd>Enter</kbd> pour ouvrir le fichier) -2. **Localisez la section "scripts" du fichier**. Elle doit ressembler à : +1. **Stoppez d'abord la commande "babel --watch" que vous aviez lancée au point A.2.2.** +2. Dans VSCodium, **ouvrez le fichier `package.json`** en tapant <kbd>CTRL</kbd>+<kbd>P</kbd> puis le nom du fichier ( <kbd>Enter</kbd> pour ouvrir le fichier) +3. **Localisez la section "scripts" du fichier**. Elle doit ressembler à : ```json "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, ``` -3. **Cette section permet d'indiquer des tâches qui pourront être lancées à l'aide de la commande `npm run <nom-du-script>`.** Par défaut le `package.json` contient une tâche `"test"`. Lancez le script `"test"` en tapant : +4. **Cette section permet d'indiquer des tâches qui pourront être lancées à l'aide de la commande `npm run <nom-du-script>`.** Par défaut le `package.json` contient une tâche `"test"`. Lancez le script `"test"` en tapant : ```bash npm run test ``` Vous verrez la commande `"echo \"Error: no test specified\" && exit 1"` s'exécuter dans le terminal. <img src="images/readme/npm-run-test.gif" style="width:80%"/><br> `"test"` est donc une sorte d'alias permettant de lancer une commande plus complexe. -4. **Ajoutez maintenant dans le `package.json` un nouveau script qu'on appellera "build"** et qui permettra de lancer la compilation Babel : +5. **Ajoutez maintenant dans le `package.json` un nouveau script qu'on appellera "build"** et qui permettra de lancer la compilation Babel : ```json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -127,16 +128,16 @@ Avec le `package.json` on va créer des "raccourcis" pour lancer ces commandes p }, ``` *Vous noterez que le chemin `./node_modules/.bin/' n'est pas nécessaire !* -5. **Lancez la commande `npm run build`** et constatez avec émerveillement que la compilation babel se lance ! +6. **Lancez la commande `npm run build`** et constatez avec émerveillement que la compilation babel se lance ! *Si la compilation ne se lance pas, plusieurs raisons possibles :* - *soit Babel n'est pas correctement installé, * - *soit la section "scripts" n'est pas correctement formatée (pensez qu'il s'agit d'un fichier JSON, par conséquent l'oubli d'une virgule entre chaque script ou au contraire l'ajout d'une virgule à la fin du dernier script, sont considérés comme des erreurs de syntaxe).* -1. **Ajoutez un nouveau script nommé `"watch"`** qui permettra de lancer la commande : +7. **Ajoutez un nouveau script nommé `"watch"`** qui permettra de lancer la commande : ```bash ./node_modules/.bin/babel js -d build --verbose --watch --source-maps ``` - Lancez la commande `npm run watch` dans votre temrinal et vérifiez que lorsque vous modifiez le fichier `js/main.js`, le fichier `build/main.js` est bien mis à jour. + Lancez la commande `npm run watch` dans votre terminal et vérifiez que lorsque vous modifiez le fichier `js/main.js`, le fichier `build/main.js` est bien mis à jour. ## Étape suivante Si la compilation fonctionne, vous pouvez passer à l'étape suivante : [B. La POO](B-poo.md) \ No newline at end of file