1. Home
  2. Documentation
  3. Frontend
  4. Configuring Babel
WARNING: You are browsing the documentation for Symfony 4.0 which is not maintained anymore. Consider upgrading your projects to Symfony 5.0.

Configuring Babel

4.0 version
Maintained
3.4 4.4 5.0 current 5.1 master
Unmaintained
3.3 4.1 4.2 4.3

Configuring Babel

Babel is automatically configured for all .js and .jsx files via the babel-loader with sensible defaults (e.g. with the env preset and react if requested).

Need to extend the Babel configuration further? The easiest way is via configureBabel():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// webpack.config.js
// ...

Encore
    // ...

    // first, install any presets you want to use (e.g. yarn add babel-preset-es2017)
    // then, modify the default Babel configuration
    .configureBabel(function(babelConfig) {
        // add additional presets
        babelConfig.presets.push('es2017');

        // no plugins are added by default, but you can add some
        // babelConfig.plugins.push('styled-jsx/babel');
    })
;

Creating a .babelrc File

Instead of calling configureBabel(), you could create a .babelrc file at the root of your project. This is a more "standard" way of configuring Babel, but it has a downside: as soon as a .babelrc file is present, Encore can no longer add any Babel configuration for you. For example, if you call Encore.enableReactPreset(), the react preset will not automatically be added to Babel: you must add it yourself in .babelrc.

An example .babelrc file might look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
    presets: [
        ['env', {
            modules: false,
            targets: {
                browsers: '> 1%',
                uglify: true
            },
            useBuiltIns: true
        }]
    ]
}

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.