Learn Babel Loader Javascript ES6

What is babel or babel.js? Babel is a transpiler that changed the syntax of modern JavaScript (ES6+) into syntax that all browsers can fully support.

JavaScript is a programming language that is growing very rapidly. The community is great, and every year there is always a new version.

However, the development of rapid turns out to require a long time to be adopted by the browser or Node.js. Then if we want to try the syntax of the latest in JavaScript, do we need to wait until the entire browser successfully adapted to the update? Of course not!

With babel, you can write down the syntax of JavaScript as the latest version without worrying about support on your browser. Because babel will change the syntax of which we write into the code that is acceptable to the browser.

If You're curious how babel works, babel provides a playground that we can use to change the syntax of modern JavaScript (ES6+) into the syntax old. To try it, please go to the following links: https://babeljs.io/repl.

On the playground, we can also choose the preset that we want. By default, presets will lead ES2015 (ES6).

You already know at a glance about babel. Well, on webpack, we can also use babel in the form of a loader.

Although webpack by default can process JavaScript files without the need for the help of a loader, the process does not change the syntax of which we write.

This means that if we write down the syntax of modern JavaScript, we will also find her on file bundle.js.

Although Google Chrome and Mozilla Firefox already support the writing of the syntax of ES6, however at least we need a bit of care to support older browsers such as Internet Explorer or the browser of the old version of the other.

To use babel in webpack as a loader, we need to install three packages using npm in devDependencies.

The first package @babel/core, the second babel-loader, and the third @babel/preset-env.

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

Package @babel/core is a package of the core that should be installed when we want to use babel, both in webpack or tools to the other.

Package babel-loader is the package needed to use babel as a loader in webpack.

The last package, @babel/preset-env, is a preset package that we will use to help babel-loader perform their duties.

@babel/preset-env is a preset intelligence that allows us to use the latest JavaScript without setting specific syntax of the JavaScript version of what we use.

File package.json will look like this after installing a third of the packages:

{
  "name": "webclock",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "moment": "^2.24.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

After successfully installing a third of the packages, the next step we can use the babel-loader and the presets in the webpack configuration.

const path = require("path");
 
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    mode: "production",
    module: {
        rules: [
            /* style and css loader */
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            /* babel loader */
            {
                test: /\.js$/,
                exclude: "/node_modules/",
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    }
                ]
            }
        ]
    }
}

When applying the rule to the file .js, do not forget to set the property to exclude with the value "/node_modules/".

What does it mean? To set the property to exclude it means we exclude webpack to process the file .js located in the folder "node_modules".

This can minimize the process is not necessary, thus speeding up the build on our new project.

Then, on the babel-loader application, we also use the options property to set the property presets in it. On the property presets, we set the preset (in the form of an array literal) we've installed using npm, namely @babel/preset-env.

After using the babel-loader in the webpack configuration, let's try to build and reopen the file bundle.js.

Then the code that we write in ES6 will be changed in the syntax that all browsers can accept.

Even on the file bundle that certainly was not there again, the syntax is written using ES6.

However, although the syntax has been changed, the project will remain normal.