In our previous part we discovered NodeJs and its principle of modules/packages. We found that Nodejs has a package manager module called npm. We also mentioned an example of a package, the @ant-design/colors.
In this lesson, we will discover another special package called Babel. One of these tools is used to allow us to write modern JavaScript. But at this point, you might be wondering what a transpiler is and what modern JavaScript means.
Transpiler
In general, a transpiler is a compiler(translator) that compiles a program written in a language into the same program in the same or a different language. In short, it's a source-to-source translator.
Babel is a transpiler that takes code written in modern JavaScript and turns it into JavaScript code that can be understood by many especially old browsers. This increases the compatibility of our JavaScript code across browsers. This technique facilitated the growth of JavaScript with newer features and increased our level of creativity and productivity.
Modern JavaScript
We use the term Modern JavaScript to refer to the newest JavaScript features introduced in ES2015 such as arrow functions, let/const declarations, template literals, and modules — yes, modules.
Previously...
- Variables in JavaScript
var car = 'Masrati';- Templates
var greeting = "Hello, my name is " + John + " I am a computer machine and I am "+ age + " years";- function
function greet(name){
return "Hello, "+ name;
}And now...
- Variables in JavaScript
var car = 'Masrati';
const pi = 3.14;
let scope ='global'- Templates
var greeting = `Hello, my name is ${John} I am a computer machine and I am ${age} years`;- function
const greet = name => `Hello, ${name}`;- Modules
export default add = (a, b) => a+b'At this point, I am sure you can see where we are heading.
But there is one last thing before we explore how to use babel. These tutorials are about ReactJS. When we start writing the actual ReactJS code, you will discover something called JSX, which is a special JavaScript and HTML code used to simplify how we write the two. That stuff is a new thing that browsers by default cannot interpret. So, we make use of tools like Babel to transpile our JSX code into JavaScript that browsers can understand. With that in place, everyone is happily focusing on writing the new cool JavaScript.
Babel
Now, let's see how to use Babel. First of all, we need to install it in our project. Let's set up Babel in our project to transpile modern JavaScript code into browser-compatible code. As a node module, you can already guess that we need npm to install it. Open up your terminal, and cd to your project folder. The one you created in the previous post. Mine was C:\laragon\www\learning\node\tutorials.
Step 1: Initialize the Project
Before installing Babel, ensure that your project has a package.json file, which acts as the configuration file for Node packages. But if you followed the previous posts, your project would have had the file. It was created automatically when you installed the colors package. If you don't already have one, create it by running:
npm init -yThis command initializes the project with default settings and creates a package.json file.
Step 2: Install Babel
Next, install the necessary Babel packages. At a minimum, you need the Babel CLI and a preset for modern JavaScript. The reason is because Babel is a modular tool. It comes with what is called presets and plugins. These allow us to define any process we want Babel to follow. This Makes it a powerful and versatile tool. In our case where we want to write, for now, only modern JavaScript, we will need three things from Babel:
@babel/core: The core Babel library itself. What we can simply call "Babel".
@babel/cli: Command-line interface for Babel. A list of commands we can to talk to Babel core
@babel/preset-env: A smart preset that allows you to use the latest JavaScript features.
Note that they are all node packages that we can download from
npmeither individually or all at once.
So, to install them, run the following command:
npm install --save-dev @babel/core @babel/cli @babel/preset-envNote the
--save-devoption. This option tells node package manager that these packages we are downloading are just for the development phase. Once we are done with the project and want to launch it, these packages will not be in the final code.
Step 3: Configure Babel
Create a Babel configuration file in your project root called .babelrc. Add the following content to it:
{
"presets": ["@babel/preset-env"]
}This tells Babel to use the @babel/preset-env to transpile modern JavaScript features.
Step 4: Transpile JavaScript
Now, let's create a JavaScript file to test Babel. For example, create a file named modern.js with the following content:
const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));To transpile this file into browser-compatible JavaScript, run:
npx babel modern.js --out-file transpiled.jsOr if we can add this to this package.json:
"scripts": {
"build": "babel modern.js --out-file transpiled.js"
}And then, run the following in your terminal:
npm run buildThis command tells Babel to transpile modern.js and output the result into a new file called transpiled.js.
Step 5: Verify the Output
Open the transpiled.js file to see the transpiled code. It should look something like this:
"use strict";
var greet = function greet(name) {
return "Hello, " + name + "!";
};
console.log(greet("World"));As you can see, Babel converted the modern JavaScript syntax (arrow function and template literals) into code that older browsers can understand.
Why Babel Matters
Babel ensures that we can use the latest JavaScript features without worrying about browser compatibility. This is especially critical when working with ReactJS because React introduces JSX, a syntax that combines JavaScript and HTML. Babel will transpile JSX into regular JavaScript that browsers can interpret.
Next Up
In the next part, we will explore bundlers and task runners like Webpack and Parcel. These tools help us manage dependencies, optimize assets, and streamline our development workflow, making them essential for building modern React applications. Stay tuned!
Last updated 2025-01-23 UTC