@yaakadev/ng-scripts-formation

ng-scripts

Boîte à outils versatile pour moderniser facilement des application AngularJS.

• Permet d'utiliser les dernières fonctionnalités du language ECMAScript sans avoir à se préoccuper des anciens navigateurs (grâce à Babel)
• Permet d'importer les dépendances de l'application directement depuis votre code JavaScript sans avoir à se préoccuper de leur type (grâce à Webpack), tout en générant le minimum de fichier possible
• Empêche les erreurs simples et/ou d'inattention d'arriver jusqu'au client (utilisation de variable non définie, variable non utilisée, etc.) (grâce à ESLint)
• Minifie automatiquement votre code pour améliorer les performances de chargement de votre application (grâce à Webpack)
• Minifie automatiquement vos fichiers styles, améliorant les performances de chargement de votre application (grâce à cssnano)
• Annote automatiquement les dépendances des éléments de votre application AngularJS (grâce à angularjs-annotate)

Installation

$ npm i @yaakadev/ng-scripts

Ouvrez ensuite le fichier package.json de votre projet avec votre éditeur favori et modifiez la section scripts comme ci-dessous:

{
  "scripts": {
    "dev": "ng-scripts start",
    "build": "ng-scripts build",
    "test": "ng-scripts test"
  }
}

Voilà ! Vous pouvez désormais tirer parti des toutes dernières fonctionnalités & technologies de l'écosystème JavaScript.

Structure de votre projet

ng-scripts impose les contraintes suivantes sur votre application:

• L'application compilée est exportée dans le dossier public du dossier parent (soit ../public)
• Les points d'entrée de votre application sont situés dans le dossier src/packs
• Les templates HTML de votre application stocké dans le dossier src/views seront copiés tels quels dans le dossier ../public/views

$ tree
├── app/
│   ├── package.json  # Le `package.json` dans lequel vous avez configuré `ng-scripts`
│   ├── package-lock.json
│   └── src/
│       ├── packs/
│       │   ├── index.html  # Document HTML du point d'entrée `accueil'
│       │   ├── index.js  # Logique JavaScript du point d'entrée `accueil'
│       │   ├── login.html  # Document HTML du point d'entrée `login'
│       │   └── login.js  # Logique JavaScript du point d'entrée `login'
│       └── views/
│           ├── template-1.html
│           └── template-2.html
├── bin/
│   └── www.js
├── index.js
├── package.json
├── package-lock.json
├── public/
│   └── ...  # Vous trouverez ici les fichiers compilés de votre application
└── routes/
    └── ...

Points d'entrées

Un point d'entrée est une paire de fichiers HMTL/JS situés dans le dossier src/packs, ces fichiers doivent porter le même nom et ne différer que par leur extension. Le document HTML ne doit pas contenir de balises <script> ou <link> pour importer de JavaScript ou de CSS respectivement, à la place il faut importer les fichiers désirés depuis le fichier JS du point d'entrée. ng-scripts se chargera ensuite de concaténer, minifier, compresser ces dépendances, ajoutera les balises nécessaires au document HTML et les disposera dans le dossier ../public. A noter que le fichier HTML conserve son nom lorsqu'il est émit dans le dossier ../public (ex: le point d'entrée src/packs/accueil.html génerera le fichier ../public/accueil.html).

Utilisation

ng-scripts start

C'est la commande recommandée lorsque vous travaillez sur votre application. Cette commande compile l'ensemble de votre projet puis continue de tourner et recompile incrémentalement votre projet à chaque changement détecté.

Cette étape n'active pas d'optimisations particulières sur votre code (pas de minification, etc.).

Les source-maps sont activées et embarquées dans les sources compilées.

ng-scripts build

C'est la commande recommandée lorsque vous voulez exporter votre application et l'exposer sur les interwebs mondiaux.

Cette étape active toutes les optimisations possibles.

Les source-maps sont activées et exportées dans des fichiers séparés de votre application.

ng-scripts test

TODO: Doc