COMPILE.md

Compilation du projet

• Prérequis (outils)
  • Réglage des outils
    • Gestion des fins de lignes (Git)
    • Configuration du proxy d'entreprise
  • Utilisation du terminal (Console Git ou NodeJS)
• Commandes via NPM
  • Installation des dépendances
  • Installation d'une version spécifique d'une dépendance
• Compilation
• JSDOC
  • Construction de la JSDOC
  • Ouvrir la JSDOC sur un navigateur
• Les exemples
  • Construction des exemples
  • Ouvrir les exemples sur un navigateur
• Les tests
  • Fonctionnels
  • Tests de rendu
• Carte des sources et des dépendances
  • Analyse (The Official Analyse Tool)

Prérequis (outils)

• nodeJS (https://nodejs.org/en/download/) en version 10 minimum
• git (https://git-scm.com/downloads)
• git gui (facultatif)
• tortoiseGit (facultatif)
• Visual Studio Code / VSCode (facultatif)

Réglage des outils

Gestion des fins de lignes (Git)

--Windows only!--

ouvrir une console :

git config core.autocrlf false
git rm --cached -r
git reset --hard

Note : Possibilité de le faire via l'editeur Visual Studio Code dans le menu Fichier > Préférences > Paramètres utilisateurs Pour plus d'information, cf. https://code.visualstudio.com/docs/getstarted/settings

Configuration du proxy d'entreprise

ouvrir une console :

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

ou

sous Windows, modifier le fichier C:\Users< USER >\.npmrc (sous Linux, on utilise le fichier $HOME/.npmrc ) avec les lignes suivantes :

proxy=http://proxy.company.com:8080
https-proxy=http://proxy.company.com:8080
https_proxy=http://proxy.company.com:8080

ou

sous Windows, déclarer les variables d'environnement suivantes :

HTTP_PROXY
HTTPS_PROXY

Utilisation du terminal (Console Git ou NodeJS)

--Windows only!--

Git et NodeJS fournissent leur propre console. L'utilisation de ces consoles permet d'avoir un environnement complet (ex. variables systèmes), mais il est tout à fait possible d'utiliser la console de Windows (CMD).

Note : Possibilité d'utiliser le terminal de Visual Studio Code dans le menu Affichage > Integred Terminal Pour plus d'information, cf. https://code.visualstudio.com/docs/editor/integrated-terminal

Commandes via NPM

Liste des targets disponibles :

npm run <target> <option>
    target : (clean), setup,
             build[:src|:dev|:prod|:ol[:src|:dev|:prod]|:leaflet[:src|:dev|:prod]|:itowns[:src|:dev|:prod]],
             sample, (doc)
             sample:serve, doc:serve

Installation des dépendances

ouvrir une console :

npm install

Si vous passez par les commandes du package.json, les dépendances sont installées via la target suivante :

ouvrir une console :

npm run setup

Installation d'une version spécifique d'une dépendance

Orienté developpement :

ouvrir une console :

// branche master du depot "IGNF/geoportal-access-lib" (dev)
npm install https://github.com/IGNF/geoportal-access-lib/tarball/master --no-save

Upgrade de version :

ouvrir une console :

// publication openlayers en version 4.4.4
npm install [email protected] --no-save

Compilation

ouvrir une console (ex. avec openlayers) :

npm run build:ol
ou npm run build:ol:prod
ou npm run build:ol:dev
ou npm run build:ol:src

Les bundles sont disponibles dans le répertoire :

dist/openlayers/GpPluginOpenLayers.js
dist/openlayers/GpPluginOpenLayers.css
dist/openlayers/GpPluginOpenLayers-src.js
dist/openlayers/GpPluginOpenLayers-src.css
dist/openlayers/GpPluginOpenLayers-map.js
dist/openlayers/GpPluginOpenLayers-map.css

Les sources sont validées (jshint, jscs et/ou eslint). La jsoc, les tests et les exemples sont générés.

Il est possible de lancer la génération des bundles pour l'ensemble des extensions :

// génération des bundles en mode développement (cad sourcemap)
npm run build:dev
// génération des bundles en mode production
npm run build:prod
// génération des bundles en mode sources
npm run build:src

Ou on lance tout...

npm run build

Ex. commande du client webpack en mode verbose

./node_modules/.bin/webpack --config build/webpack/webpack.config.openlayers --display verbose

JSDOC

Construction de la JSDOC

La jsdoc est générée lors du build dans le répertoire jsdoc.

Sous Windows, il est possible que la JSDoc ne soit pas compilée correctement (problème de path du binaire), on peut l’exécuter manuellement :

ouvrir une console :

node_modules\.bin\jsdoc -c jsdoc.json

Ouvrir la JSDOC sur un navigateur

ouvrir une console :

npm run doc:serve (par defaut, ol)
ou npm run doc:ol:serve
ou npm run doc:leaflet:serve
ou npm run doc:itowns:serve

Le navigateur s'ouvre sur la page de la JSDOC sur l'URL suivante : http://localhost:9001/

Les exemples

Les exemples sont générées lors du build dans le répertoire samples.

Mais il est aussi possible de les executer autrement :

ouvrir une console :

npm run sample (par defaut, ol)
ou npm run sample:ol:serve
ou npm run sample:leaflet:serve
ou npm run sample:itowns:serve

Le navigateur s'ouvre sur la page des exemples sur l'URL suivante : https://localhost:9001/

Les tests

Fonctionnels

ouvrir une console :

npm run test
npm run test:serve

Le navigateur s'ouvre sur la page des tests sur l'URL suivante : http://localhost:9001/

Tests de rendu

ouvrir une console :

cd test_rendering
npm install
node server.js
npm run test[:ol|:it|:ll]

Carte des sources et des dépendances

cf. https://github.com/webpack-contrib/webpack-bundle-analyzer

ouvrir une console :

sudo npm install -g webpack-bundle-analyzer
webpack-bundle-analyzer build/map/map-ol.json

Le navigateur s'ouvre sur l'URL suivante : http://localhost:8888/

Analyse (The Official Analyse Tool)

Aller sur l'URL suivante : http://webpack.github.io/analyse/

puis, utiliser le fichier map-[ol|it|ll].json