What is babel and how to use it while developing next generation applications

babeljs.io

Babel is a popular JavaScript transpiler/compiler, that allows developers to write code using the latest ECMAScript features and then transform it into a backward-compatible version that can run in older browsers or environments that do not support the latest language features.

ECMAScript is the standard upon which JavaScript is based, and it undergoes periodic updates to introduce new features, syntax, and improvements to the language. However, not all browsers or environments support the latest ECMAScript specifications immediately. Babel helps bridge this gap by allowing developers to write modern JavaScript code and then transpile it into a version that is compatible with a specific target environment.

Babel can be configured to use different presets and plugins that define which ECMAScript features should be transpiled and how the transformation should occur. This flexibility makes it a powerful tool for developers working on projects that need to support various browsers or runtime environments.

Here’s a step-by-step guide on how to use Babel for developing next-generation applications.

1. Start by installing Babel in your project using npm (Node Package Manager) or yarn (alternative package manager).

yarn add --dev @babel/core @babel/cli

2. Babel configurations are defined in a file named .babelrc or babel.config.jsor specified within your package.json file.

Example babel.config.js:

module.exports = {
  presets: ["@babel/preset-env"],
};

@babel/preset-env is a Babel preset that enables developers to use the latest ECMAScript features without having to manually configure which specific transformations or plugins are needed for compatibility with specific browsers or environments. This preset simplifies the process of handling different ECMAScript versions and ensures that your code is transpiled to a format supported by your target environments.

Install it by running:

yarn add --dev @babel/preset-env

3. Once Babel is installed and configured, you can create a build and start script in your package.json file to transpile your code using Babel.

For example:

"scripts": {
   "start": "npm run build && node dist/index.js",
   "build": "babel src -d dist"
}

Build script uses Babel to transpile code in the “src” directory and output the result into the “dist” directory. Adjust the paths based on your project structure. Start script can be used to build(transpile) and run the code at once.

4. To test this, Write your code using the latest ECMAScript features in the “src” directory.

For example:

src/utils.js

export const iterateEntries = (object) => {
  for (const [key, value] of Object.entries(object)) {
    console.log(key, value);
  }
};

src/index.js

import { iterateEntries } from "./utils";

const object = { js: ":)", ts: ":))", go: ":)))", rust: ":)))", java: ":(((" };
iterateEntries(object);

Now you can use your start script to transpile and execute the transpiled code.

The contents of the “dist” folder will contain the transpiled code generated by Babel. When you run the build script using Babel, it takes the source code from the “src” directory, processes it according to the specified Babel configuration, and then outputs the result into the “dist” directory.

// Checkout complete Babel setup in GitHub, Don’t forget to give me a star :)

GitHub - ASMohamedFaheemAnver/Babel: Talks about babel and it's functionality!