Bonjour à tous,

Je travail sur un projet qui demande l'utilisation de VueJS et j'ai décidé de le coupler avec Symfony en utilisant WebpackEncore.
Le projet utilise également PrismJS qui me permet de mettre en place une coloration synthaxique de certains éléments suivant les langages.

Le problème c'est que Prism demande une configuration un peu spécial à réaliser dans le fichier babelrc, hors comme j'utilise WebpackEncore j'ai enregistré le plugin directement dans mon fichier webpack.config comme ceci :

.configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
        config.plugins.push('prismjs');
    })

Il m'est donc impossible de rajouter la config suivante à Babel :

{
  "plugins": [
    ["prismjs", {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
    }]
  ]
}

J'ai essayé de passer par le fichier babelrc et donc de ne pas enregistrer le plugin dans webpack encore, mais malheureusement après je ne sais pas comment activer le support de Vue pour Symfony dans le fichier babelrc.

Est-ce que vous auriez des pistes à suivre afin de pouvoir faire fonctionner le tout correctement ?

Merci à tous ;)

1 réponse


Bonjour,

Ne pourais-tu pas à la fin de ta configuration webpack-encore récupérer la configuration webpack, juste avant l'export, et injecter la configuration prismjs à ce moment ?

... 
const config = Encore.getWebpackConfig()

config.plugins['prismjs']['languages'] = ["javascript", "css", "markup"]
config.plugins['prismjs']['plugins'] = ["line-numbers"]
config.plugins['prismjs']['theme'] = "twilight"
config.plugins['prismjs']['css'] = true

module.exports = config