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

``bash
$ 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:

`json
{
"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

`bash
$ 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/
   └── ...
`

$3

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