Mettre en place un environnement de développement permettant de compiler le code ES6 en ES5, de gérer le typage et de linter les erreurs.

• Préparatifs
• Instructions : Babel
• Instructions : Flow
• Instructions : ESLint

• Télécharger et installer la version 8.. de NodeJS : http://nodejs.org/
• repartir de vos fichiers du TP précédent ou bien des fichiers contenus dans ce repository (qui correspondent à la correction du tp précédent !)
• dans chrome, désactiver le support des features ECMAScript expérimentales. Ouvrir un onglet sur chrome://flags et dans cette page rechercher et désactiver la clé "Experimental JavaScript" (nécessite un redémarrage de chrome).

1. Initialiser npm à la racine du dossier du projet. Lancer la commande :

   npm init

   Un questionnaire vous sera posé. Laissez les options par défaut.

2. Installer Babel

   npm install --save-dev babel-cli babel-loader babel-core 

   Constater dans le fichier package.json créé par npm init que les packages que l'on vient d'installer sont ajoutés dans devDependencies

3. renommer le dossier js en src puis compiler le JS à l'aide de Babel CLI :

   .\node_modules\.bin\babel src -d build 
   

   Si vous utilisez des features ESNext qui déclenchent une erreur (features pas encore supportées comme les Object rest spread transforms), commentez pour le moment les lignes en question et recompiler.

   Corriger le code du fichier index.html pour qu'il utilise le fichier généré dans le dossier 'build' plutôt que le fichier de l'ancien dossier 'js'.

   Constater que le fichier généré par Babel n'est pas transpilé mais reste intact 😬

4. Activer la transpilation en ajoutant le preset 'env' au projet. Ce preset contient les presets ES2015, ES206 et ES2017.

   npm install --save-dev babel-preset-env
   

   Ajouter un fichier .babelrc à la racine du dossier (au même niveau que le package.json donc) et y placer le code suivant :

   {
     "presets": ["env"]
   }

   Recompiler l'application et constater la transpilation en ES5.

5. La tranpilation avec le preset 'env' fonctionne sauf pour les features en stage < 4. Pour transpiler l'intégralité des features ESNext, il faut utiliser les presets correspondant au stage voulu. Pour supporter la feature Object rest spread transform il faut par exemple ajouter le preset stage-3 :

   npm install --save-dev babel-preset-stage-3

   .babelrc :

   {
     "presets": ["env", "stage-3"]
   }

   Reste à décommenter les lignes commentées au point 3 puis recompiler.

6. Pour le support des generators, ajouter le plugin babel-polyfill (noter le --save et pas --save-dev) :

   npm install --save babel-polyfill

   Ajouter ensuite le script de babel-polyfill dans le code html de la page (juste avant l'inclusion du fichier build/ui-framework.js) :

   <script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

7. Pour simplifier la compilation, ajouter une commande npm qui va servir de "raccourci" pour la commande babel : modifier le fichier 'package.json' et modifier la clé "scripts" comme suit :

   "scripts": {
     "build": "babel src -d build"
   },

   Compiler ensuite l'application en lançant la commande

   npm run build

8. A l'aide de la documentation de babel, ajouter une commande npm run watch qui permettra de lancer la compilation dès qu'une modification sera apportée à un fichier du dossier 'src'. Ajouter aux deux commande (build et watch) le support des source-maps. Recompiler et inspecter le code dans les devtools de chrome puis mettre un breakpoint dans le fichier js du src, recharger la page et constater que chrome arrête bien l'exécution au bon endroit malgré le fait qu'il exécute la version compilée du JS.

9. Installer et configurer Flow, ajouter le preset babel flow

   npm install --save-dev babel-preset-flow flow-bin

   .babelrc :

   {
     "presets": ["env", "stage-3", "flow"]
   }

   ajouter un script au package.json :

   "scripts": {
     "flow": "flow"
   }

   Initialiser Flow :

   npm run flow init

10. Ajouter des informations de typage aux paramètres des fonctions , aux valeurs de retour et à toutes les variables du code. Tester le typage avec la commande :

    npm run flow --silent

    Si tout est valide du premier coup (on peut toujours rêver 😜) afin de s'assurer que le typage fonctionne correctement, tentez de faire une affectation incorrecte dans votre code et de relancer flow.

NB: en cas d'utilisation des Iterators, la vérification du code avec Flow peut poser problème : dans ce cas ajouter les commentaire suivant sur la ligne juste au dessus de la déclaration de l'iterator et du for-of qui l'utilise :

// $FlowFixMe

11. Installer et configurer eslint dans le projet :

    npm install --save-dev eslint

    package.json:

    "scripts":{
    	"eslint": "eslint"
    }

    npm run eslint -- --init

    Répondre aux questions posées et examiner le fichier .eslintrc.js généré

12. Installer le plugin flow et le parser babel (nécessaire pour faire fonctionner le plugin flow, le parser par défaut, espree, ne supportant pas la syntaxe flow) pour eslint :

    npm install --save-dev eslint-plugin-flowtype babel-eslint

    ajouter dans le fichier .eslintrc.js :

    "parser": "babel-eslint",
    "plugins": ["flowtype"],
    

13. Tester eslint avec le fichier src/ui-framework.js et corriger les erreurs retournées jusqu'à ce que la commande ne retourne plus d'erreurs :

    npm run eslint src/ui-framework.js --silent

14. Comme une partie du code JS se trouve dans le document HTML, eslint retourne des erreurs car certaines fonctions ne sont pas utilisées. Déplacer donc le code JS contenu dans la page html vers le fichier ui-framework.js. Commenter les fonctions qui sont effectivement non utilisées.

15. Dans Sublime Text :

    • installer package control
    • lancer la commande (CTRL+SHIFT+P) Package Control: Install Package et installer les packages Babel, SublimeLinter, SublimeLinter-contrib-eslint et SublimeLinter-flow
    • Editer la configuration de sublimeLinter (User) dans Sublime Text (menu Preferences > Package Settings > SublimeLinter > Settings-User), et si pas déjà présent ajouter :

    "syntax_map": {
      "JavaScript (Babel)": "javascript",
    }

    • Redémarrer Sublime Text, ouvrir le fichier ui-framework.js, modifier pour créer une erreur et constater que l'erreur s'affiche !