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
link - 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)


Plugins

A Plugin is a specific code transformation that can be included during compilation.
link - babeljs.io/docs/en/plugins


Presets

A Preset is a group of plugins used to support particular language features.
link - babeljs.io/docs/en/presets


babel.config.json

Babel has two parallel config file formats which can be used together, or independently.
babel.config.json - Project-wide configuration. Useful if you have multiple package.json directories in your project.
.babelrc - File-relative configuration. Useful if you want to run certain plugins on a subset of files or directories.
This is useful if you have multiple packages (ie multiple package.json) directories in your project that utilize a single babel config. This is less common.


.babelrc

You can use a separate file called ".babelrc" 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.
This is a snippet from a webpack.config.js file:

  module: { 
    rules: [
      {
        test: /.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
             presets: [
'@babel/preset-env',
'@babel/preset-typescript',
'@babel/preset-react'
             ]
             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 


ES 2015 Syntax

Lets introduce some ES 2015 syntax into the 'index.js' file.
Change the function declaration to the following which includes a 'fat arrow'.

window.onload = Start() => { 

Now IE 11 is only compatible with ES 2009 and will not support fat arrows out of the box.
To get around this problem we can install an additional webpack module that will convert these fat arrows into ES 2009 syntax.
Infact this webpack module will convert all ES 2015 features into ES 2009.

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

This module will be added as a devDependency to the package.json file.
Check the 'package.json' file by dragging it into the Microsoft Edge browser.
You also need to tell Webpack to use this "plugin" when it transpiles the javascript code.
Add the 'options' element underneath 'babel-loader' to include this plugin, in the 'webpack.config.js' file.

    rules: [ 
      {
        test: /.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
             plugins: ['@babel/plugin-transform-arrow-functions']
             presets: ['@babel/preset-env']
          }
        }
      }
    ]

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