Want to start using async generator function, spread operator and all the latest features of ES2017, ES2018 in your projects?
Well, wait no further to checkout how easily you could achieve this!
There are 2 ways of supporting these features –
- Update .babelrc file
- Update Webpack Encore config
A little background explaining What is Babel? And what are Babel presets?
Latest features of Javascript (like spread operators) may not supported by all major browsers. To use these latest features, they need to be transformed/converted into code that current Javascript versions can understand. That’s where Babel comes in. It is a tool for transforming(or transpiling) Javascript. Via babel you can use the latest features without having to wait for your browser to adopt them.
A babel preset is a plugin that is used to support particular javascript features. Babel supports ES2015 javascript out of the box. But to add support for ES2016+, you will need to use presets. Here’s a list of all available presets and the features they support.
Concluding, we will have to use presets to support async generator functions, spread operators, etc. Lets see exactly which presets are required and how to install/configure them.
1. Update .babelrc (Recommended Way)
- ES2018 includes the features in question. babel stage 3 preset supports ES2018. So we need to install this preset. We could install it via npm or yarn. To support ES2016, ES2017, you could install babel env preset too.
// install stage 3 preset
npm install babel-preset-stage-3 --save-dev
// install support for ES2016, ES2017
npm install babel-preset-env --save-dev
- Create a file named
.babelrcat the root of your project. Build tools (like Webpack/Gulp) look for babel configuration in this file. Lets update the configuration as shown below. More configuration options can be found here.
{
"presets": ["stage-3", "env"]
}
- Relaunch Webpack and you should be good to go!
Note: This approach can be used with Webpack 2 onwards. However, if you use this approach with Webpack encore, Encore will not be able to add any Babel configuration automatically. For example, if you call Encore.enableReactPreset(), the react preset will not be added to Babel configuration. You will have to add it yourself in your .babelrc file. (Ref)
2. Update Webpack Encore Config
- As mentioned earlier, to support ES2016+ features, we will be required to install the stage-3 preset and the env preset.
// install stage 3 preset
npm install babel-preset-stage-3 --save-dev
// install support for ES2015, ES2016, ES2017
npm install babel-preset-env --save-dev
- Encore can update your babel configuration for you. To do that, update your
webpack.config.jsfile as shown below.
// webpack.config.js
// ...
Encore
.configureBabel(function(babelConfig) {
// add additional presets
babelConfig.presets.push('stage-3');
babelConfig.presets.push('env');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
})
;
- Relaunch Webpack and viola!
Now you should be able to use the latest ES2016, ES2017 and ES2018 features without breaking your application.
Cheers!
One comment