Babel

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
https://babeljs.io/
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)


Presets

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


@babel/preset-env
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


@babel/preset-typescript
This lets you compile typescript.

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

@babel/preset-react
This lets you compile JSX into regular Javascript.

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

.babelrc

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: [
'@babel/react',
'@babel/preset-env'
             ]
             plugins: [
'@babel/plugin-transform-arrow-functions'
             ]
          }
        }
      }
    ]

babel-loader

This lets you load other babel presets.

npm install --save-dev babel-loader 

babel-polyfill

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


@babel/core

This lets you access the babel API.

npm install --save-dev @babel/core 


Plugins

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


@babel/plugin-proposal-class-properties
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 

@babel/plugin-transform-arrow-functions
This replaces any ES 2015 arrow functions with their function equivalents

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

@babel/plugin-transform-classes
This lets you

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

@babel/plugin-proposal-object-rest-spread


@babel/plugin-syntax-typescript (isTSX)



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