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 fonction extendWebpack 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.