Babel is a popular JavaScript compiler that allows you to write code using the latest JavaScript features and syntax and then transform it into backward-compatible versions that can run in older browsers or environments. Babel enables developers to take advantage of modern JavaScript language features while ensuring compatibility with a wider range of platforms.

Here's an explanation of Babel with examples (GitHub Source Code):

1. Installation: You can install Babel using npm (Node Package Manager) by running the following command in your project directory:

    npm install --save-dev @babel/core @babel/cli
   

2. Configuration: Babel requires a configuration file to define how your code should be transformed. Create a file named .babelrc in the root directory of your project and configure Babel according to your needs. For example, to enable transformation for the latest JavaScript features, you can use the following configuration:

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

   Before that install preset with the following command:

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

3. Transformation: Once Babel is installed and configured, you can use the Babel CLI (@babel/cli) to transform your JavaScript code. For example, let's say you have a file named script.js containing the following code using a modern JavaScript feature, arrow functions:

    const greet = () => {
      console.log("Hello, World!");
    };
    greet();
   

4. Running Babel: Run the following command in your terminal to transform the JavaScript code using Babel:

    npx babel script.js --out-file compiled.js
   

   This command tells Babel to read script.js, apply the configured transformations, and output the transformed code to compiled.js.

5. Transformed Code: After running the command, Babel will transform the arrow function syntax to a backward-compatible syntax. The resulting compiled.js file will contain the transformed code:

    "use strict";
   
    var greet = function greet() {
      console.log("Hello, World!");
    };
   
    greet();
   

   The transformed code can now be used in environments that do not support arrow functions.

Babel supports various plugins and presets that enable you to customize the transformation process. Plugins allow you to enable specific transformations, while presets are pre-configured sets of plugins. By installing additional plugins or presets, you can unlock additional language features and apply custom transformations.

Note that the example above demonstrates a basic usage of Babel, but Babel can be used for more complex transformations and configurations depending on your project's requirements.

By utilizing Babel, you can write modern JavaScript code without worrying about compatibility issues, as Babel takes care of transforming it into a compatible version.

References:

1. Babel preset env

2. Source code files