Install and Set Up Babel for your project

We are going to discuss how to set up babel using babel-cli as well as with webpack

Let's create a directory and run npm init --yes

mkdir projectname
cd projectname
// Create package.json file
npm init --yes

1-Set via babel-cli

a- Install babel-core and babel-cli

The core functionality of Babel resides at the @babel/core module.

@babel/cli is a tool that allows you to use babel from the terminal

Since Babel assumes that your code will run in an ES5 environment it uses ES5 functions. So if you’re using an environment that has limited or no support for ES5 such as lower versions of IE then using @babel/polyfill will add support for these methods. Make sure to add @babel/polyfill as a dependency and not dev dependency.

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install @babel/polyfill

b- Create a configuration file for babel called .babelrc

// projectname/.babelrc
{
  "presets": [ "@babel/preset-env" ]
}

c-Create the following folders and files

cd projectname 
mkdir src dist
touch src/index.js
// index.js
const addNum = ( numOne = 2, numbTwo = 3 ) => {
 return numOne + numbTwo;
};
addNum();

d-Add the script to package.json

"scripts": {
    "babel": "./node_modules/.bin/babel src -d dist"
  },

e-Now run babel

// This will transpile your modern JS code from src/index.js and convert to JS that browsers can understand and create a file dist/index.js
npm run babel

2-Set up babel with webpack

Install babel core, babel loader, webpack-cli and path

npm i -D webpack @babel/core babel-loader @babel/preset-env @babel/plugin-proposal-class-properties, @babel/plugin-syntax-dynamic-import webpack-cli path
npm install @babel/polyfill

@babel/plugin-proposal-class-properties plugin transforms static class properties as well as properties declared with the property initializer syntax.

@babel/plugin-syntax-dynamic-import provides support for dynamic imports. For example, if you use react-loadables for code-splitting , then you need to use this plugin

Now follow the step 1-c from above to create index.js file.

Then create a babel config file called .babelrc
Enable presets and target browsers:
You need to enable the @babel/preset-env in .babelrc file,

Modules: false means Hey babel don’t do anything with the modules let babel handle it. Webpack now understands modules natively, it does not have to worry about common js.
We should not transpile import statements with babel when you use webpack, because webpack supports both ES modules and Common JS modules. And import statements are for ES6 module. Webpack supports ES modules so that it can do tree-shaking

@babel/preset-env allows us to target the last 2 or 1 version of specific browsers. So even when browsers upgrade it will transpile only the codes that are not supported on a browser.

We also tell babel, the plugins that it should @babel/plugin-proposal-class-properties and @babel/plugin-syntax-dynamic-import

// projectname/.babelrc
{
  "presets": [
   [ "@babel/preset-env", {
     "modules": false,
     "targets": {
      "browsers": [
        "last 2 Chrome versions",
        "last 2 Firefox versions",
        "last 2 Safari versions",
        "last 2 iOS versions",
        "last 1 Android version",
        "last 1 ChromeAndroid version",
        "ie 11"
      ]
     }
   } ],
   "@babel/preset-react"
  ],
  "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ]
}

Add webpack.config.js file and add the configuration for the same

// webpack.config.js
const path = require( 'path' );
module.exports = {
    context: __dirname,
    entry: './src/index.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/
                use: 'babel-loader',
            }
        ]
    }
};

Add the script for webpack in package.json

"scripts": {
    "dev": "webpack --watch --mode=development",
 "prod": "webpack --mode=prodcution"
  },

Now let's run webpack

// When we run webpack, webpack will use babel-loader to convert Modern JS into the JS code that browsers can understand.
npm run dev