Webpack-encore: How to use babel plugins?

[MatthD]

I am not sure this is an issue but I did not found explanation about that,

I am trying to use class properties in my app, so I tried different things but it appears Webpack-encore is design for babel6 but plugins are design for babel 7 isn't it ?

How should I use in my configureBabel (Webpack.config.js) to be able to load the plugin?

[MatthD]

Ok I answer myself for others:

The right way with Webpack-encore to use class properties is:

npm install --save-dev babel-plugin-transform-class-properties

Then :

.configureBabel(function(babelConfig) {
        babelConfig.plugins.push('transform-class-properties'); 
    })

Hope Webpack encore will be able to use babel 7 for the futur.. :)

[arendjantetteroo]

@MatthD 0.21 uses babel 7 now :)

The name of the plugin changed a bit
yarn add @babel/plugin-proposal-class-properties

and to use it

.configureBabel(function(babelConfig) {
     babelConfig.plugins.push("@babel/plugin-proposal-class-properties");
})

[arendjantetteroo]

@MatthD Would https://symfony.com/doc/current/frontend/encore/babel.html help enough to figure this out or you think this should get an extra mention of the above?

[weaverryan]

I hope it’s documented well enough now! If not, we can please open a docs PR :).

Cheers!