This lets you compile transpile ES 2015 Javascript code into ES 2009 Javascript code.
It was created in 2014 by Sebastian McKenzie.
Babel is a JavaScript transpiler that allows 'new' JavaScript to run in 'old' browsers
It transpiles all the latest JavaScript syntax and features into regular ES 2009 JavaScript code
Extremely useful because not all browsers support all the latest JavaScript features
IE 11 does not support JavaScript ES 2015 code
Babel can convert TypeScript into regular JavaScript
Babel can convert JSX into regular JavaScript
Configuration options can be put inside the 'webpack.config.js' file (no .babelrc file)


A Preset is a group of plugins used to support particular language features

This will transpile all ES 2015 features to ES 2009

npm install --save-dev @babel/preset-env 

includes: plugin-transform-arrow-functions
includes: plugin-proposal-class-properties

This lets you compile typescript.

npm install --save-dev @babel/preset-typescript 

This lets you compile JSX into regular Javascript.

npm install --save-dev @babel/preset-react 


You can use a separate file or you can include these details into the 'webpack.config.js' file
Adding the presets and plugins to the webpack config file will only affect webpack
Anything else that uses Babel will be looking for the .babelrc file.

  module: { 
    rules: [
        test: /.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
             presets: [
             plugins: [


This lets you load other babel presets.

npm install --save-dev babel-loader 


This includes a custom regenerator runtime and core.js
This emulates a full ES 2015 environment
This needs to be dependency not a devDependency
This replaces '@babel/polyfill' which was deprecated in Babel version 7.4.0


This lets you access the babel API.

npm install --save-dev @babel/core 


A Plugin is a specific code transformation that can be included during compilation

This lets you use class properties to write elegant React components ?
Previously called 'plugin-transform-class-properties' in Babel version 6.
Class properties were introduced in ES 2016

npm install --save-dev @babel/plugin-proposal-class-properties 

This replaces any ES 2015 arrow functions with their function equivalents

npm install --save-dev @babel/plugin-transform-arrow-functions 

This lets you

npm install --save-dev @babel/plugin-transform-classes 


@babel/plugin-syntax-typescript (isTSX)

© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext