
VueJS et POI : Customisation de la configuration
Nous allons voir un peu plus en détail la configuration de POI et c qu’il est possible de faire avec celle-ci afin que vous vous fassiez une idée.
Le résultat de cet article se trouve sur le projet github de toute la série sur VueJS sur la branche
poi-custom
Fichier de base
Si vous vous souvenez de la présentation du projet, nous l’avons instalé avec la prise en charge des PWA. Ce qui nous donne le fichier de base suivant :
const path = require('path') const pkg = require('./package') module.exports = { entry: [ 'src/polyfills.js', 'src/index.js' ], html: { title: pkg.productName, description: pkg.description, template: path.join(__dirname, 'index.ejs') }, postcss: { plugins: [ // Your postcss plugins ] }, presets: [ require('poi-preset-bundle-report')(), require('poi-preset-offline')({ pwa: './src/pwa.js', // Path to pwa runtime entry pluginOptions: {} // Additional options for offline-plugin }) ] }
Comme vous pouvez le voir, le fichier est découpé en plusieurs parties :
- entry : fichiers d’entrée pour la compilation du projet
- html : Paramètres pour le fichier
index.html
à générer - postcss : Réglages propres à PostCSS
- presets : Préréglages propres à POI. Pour l’instant le preset ne permet que d’afficher un rapport sur la copilation (que contient le bundle pour quel poid) et de gérer le PWA.
Customisation
Poi permet beaucoup plus que les choses actuelles comme vous pouvez le voir dans la documentation. Nous allons ici essayer de voir comment :
- ajouter lors du build une validation eslint des fichiers
- extraire le CSS des composants vue dans des fichiers CSS.
- surcharger de deux manières différentes la configuration Webpack
Validation ESLint
Pour rajouter la validation ESLint, rien de plus simple, tout se passe dans la partie presets
de la configuration. Vous devez tout de même au préalable installer les packages suivants :
npm i -D -E eslint eslint-config-throrinstudio poi-preset-eslint
Comme vous avez pu le noter, et pour que tout le monde parte avec les mêmes bases, j’utilise ici ma propre configuration eslint inspirée de celle d’AirBnB que vous pouvez trouver ici.
Vous aurez juste à rajouter ensuite à la racine du projet le fichier .eslintrc.json
suivant :
{ "extends" : "throrinstudio/vue" }
Et le fichier .eslintignore
suivant :
# ignore les modules node node_modules
Pour finir, dans le tableau presets du fichier poi.config.js
vous aurez juste à rajouter ce bout de code :
require('poi-preset-eslint')({ loaderOptions : { configFile : path.resolve(__dirname, './.eslintrc.json'), useEslintrc : true, }, mode : '*', }),
Normalment, si vous essayez de lancer le projet, vous devriez avoir des erreurs EsLint dans les fichiers APP.vue, index.js et polyfills.js (qui ne respectent pas de base mes règles) :
Si jamais vous avez des erreurs propre à Node, je vous conseille fortement de mettre à jour toutes les dépendances dans les dernières versions existantes
Après avoir corriger les erreurs, tout devrait rentrer dans l’ordre.
Extraire le CSS des composants
De base cette partie est faire uniquement lorsque vous buildez l’application finale pour la production. Mais si vous voulez le faire aussi pour la partie développement, il vous suffit de faire ceci dans votre configuration :
{ extractCSS: true }
Ce qui nous donne maintenant ceci en sortie du terminal :
Comme vous pouvez le voir, POI découpe aussi le CSS entre les libraries externes et l’application.
Étendre Webpack
Pour cette partie, deux solutions sont possibles selon ce que vous voulez faire :
- via
webpack
: Permet d’ajouter des éléments à la configuration existante (ajout de plugins par exemple) - via
extendWebpack
: Permet de merger la configuration avec une modification que vous voulez faire.
Pour extendWebpack
par exemple, nous allons rajouter des alias disponible lors e l’import des ressources (que ce soit via ES6, require ou même via SASS). Nous allons aussi par la même occasion rajouter l’option de devtool permettant d’avoir le sourcemap du code compilé :
extendWebpack(config) { config.merge({ resolve : { alias : { styles : path.resolve(__dirname, './src/stylesheets'), plugins : path.resolve(__dirname, './src/plugins'), mixins : path.resolve(__dirname, './src/mixins'), libs : path.resolve(__dirname, './src/libs'), config : path.resolve(__dirname, './src/config'), components : path.resolve(__dirname, './src/components'), assets : path.resolve(__dirname, './src/assets'), }, }, devtool : '#cheap-module-source-map', }); },
Pour la partie webpack par contre, je vais vous montrer un exemple (qui ne sera pas dans le projet) qui permet d’ignorer certaines parties de la compilation au travers d’un regexp :
const webpack = require('webpack'); module.exports = { webpack(config) { config.plugins.push(new webpack.IgnorePlugin(/async|compile/, /ajv/)); return config; }, };
La chose la plus importante ici, c’est qu’il faut systématiquement retourner la valeur de la configuration dans la fonction
webpack
alors que la fonctionextendWebpack
ne sert qu’à merger la configuration existante avec les modifications de votre choix.
Conclusion
Maintenant vous en savez plus sur POI et ses possibilités. Bien entendu je suis passé à côté de différentes options tout aussi importantes. Mais si nous devons nous en servir dans la suite, je rentrerai dans le détail de celles-ci.
Commentaire : 1
Nouvel Article: VueJS et POI : Customisation de la configuration https://t.co/ZUVyA2SQ7b #throrinstudio #blog #poi #VueJS