Modifier le fichier

Chaîne de build front K-Sup (Package ksup-front-build)

Présentation technique du package ksup-front-build.

Objectif

L'objectif de ce package est de réaliser le build des ressources front de K-Sup d'un projet.

Fonctionnement

@startuml

skinparam arrow {
    Color #FF6655
}

autonumber

actor projet order 1
participant maven order 5
participant "script de build (npm)" order 10
participant "kore-parent" order 20
participant frontgen order 30
participant extensions order 35
entity livrable order 40

"projet" -> maven: maven clean package
maven -> "script de build (npm)": npm run build

group Chargement des configurations
    "script de build (npm)" -[#blue]-> "kore-parent": le produit en premier
    "script de build (npm)" -[#blue]-> frontgen: frontgen en première extension
    "script de build (npm)" -[#blue]-> extensions: ensuite les autres extensions
    "script de build (npm)" -[#blue]-> projet: le projet en dernier
end

"script de build (npm)" -> maven: Génération des fichiers js + css + manifest.json
maven -> livrable: war

@enduml

Un mode watch permet de travailler sans minification et avec écoute des modifications des fichiers.

Le script se base sur des fichiers de configuration présents dans le projet et ses dépendances.

Dépendances

Le fonctionnement du build CSS est basé sur :

• postcss
  • postcss-sass : transpile le scss/sass vers le css
  • postcss-import : résoud les @import
  • postcss-hash : ajoute un hash dépendant du contenu du fichier afin de mieux gérer le cache sur les navigateurs
  • postcss-url : résoud les url() présents dans les fichiers css afin de conserver les chemins relatifs
  • autoprefixer : ajoute les préfixes vendor en fonction de la compatibilité, basé sur Can I Use
  • cssnano : minification
• chokidar : pour mettre en place les watchers

Le fonctionnement du build JS est basé sur :

• webpack
  • webpack-manifest-plugin : génère les fichiers manifest pour les hash (les hash sont natifs)
  • externals (interne à webpack) : permet de référencer et donc de résoudre des dépendances JS dans le scope global.

Utilisation

Le script peut être lancé avec plusieurs paramètres.

Mode

Ce paramètre permet de choisir le mode de construction des bundles.
Valeur par défaut : production

Watch

Il s'agit d'un flag --watch qui active la surveillance des modifications des fichiers.
Si un fichier d'un bundle est modifié le bundle est rebuildé, et seulement lui.

Ce flag n'est pas compatible avec le mode production. Les hash et les manifests changeraient rendant la résolution des fichiers inopérante.

Build

Ce paramètre permet de choisir ce que l'on va construire.
Valeur par défaut : all