Webpack-encore: Is it possible to add browsers without .babelrc?

[collierscott]

I have read the documentation for configuring Babel v4.0 but am not able to figure out how to add browsers without using .babelrc.

Is this even possible? If so, an example would be great.

Thanks!

[weaverryan]

Hey there!

It is possible. Via the configureBabel() method, we allow you to customize the babelrc file without s tuskly creating it. Check out the jsdoc above that method in the index.js file of this repository (sorry for no link - writing on my phone!)

[collierscott]

Thanks for the response. I thought I did that yesterday but was probably just missing something minor. I think I have it now.

Appreciate it!

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // Clean up existing files before building
    .cleanupOutputBeforeBuild()

    // Sourcemaps
    .enableSourceMaps(!Encore.isProduction())

    // ReactJS
    .enableReactPreset()

    // Define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addEntry('js/top', './assets/js/top.js')
    .addStyleEntry('css/app', ['./assets/scss/app.scss'])

    .createSharedEntry('js/vendor', [
        'jquery',
        'popper.js',
        'bootstrap',
        './assets/vendors/fontawesome-pro-5.0.2/svg-with-js/js/fontawesome-all.js'
    ])

    // uncomment if you use Sass/SCSS files
    .enableSassLoader()

    // uncomment to create hashed filenames (e.g. app.abc123.css)
    //.enableVersioning(Encore.isProduction())
    .enableVersioning()

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // PostCss
    .enablePostCssLoader((options) => {
        options.config = {
          path: 'config/postcss.config.js'
        };
    })
    .configureBabel(function(babelConfig){
        babelConfig.presets.push = {
            targets: {
                browsers: "> 1%"
            }
        };
    })
;

[collierscott]

Well, maybe not. I changed the "browsers" value to something different and it does not seem to be changed from the default. Printing out the config shows that the default is still used.

"targets": {
"browsers": "> 1%",
"uglify": true
},

What am I missing here? Thanks, Scott

[Lyrkan]

Hi @collierscott,

That's probably because you push a new preset instead of replacing the one already included in Encore.

Here is an (ugly) way to change the right object:

Encore.configureBabel((babelConfig) => {
  babelConfig.presets[0][1].targets = {
    browsers: '> 15%',
    uglify: true
  };
});

However that won't work if we change the order of the presets, so it would probably be better to iterate over babelConfig.presets and detect the right one.

[weaverryan]

Oof, that IS ugly :).

This is related to #29, where you can specify the browsers in package.json. But I think we might still be waiting on babel v7 to allow this? Not positive - always a lot of things moving :p

[weaverryan]

You can now specify browserslist in your package.json file - and that is used by all tools, like Babel abd postcss 🎆

Cheers!