TIL29 - Babel

We can use the Babel package to transpile JavaScript ES6+ to the older ES5 to allow for a wider range of browser compatibility.

Babel is a Node.js package used to transpile ES6+ code to ES5.

You have to have Node.js installed on your computer to use the npm command line interface.

How to use Babel

1. Create a directory named src in the root directory of your project and save your ES6 JavaScript file in this directory.

• The path to your ES6 file (named 'main.js', for example) from the project's root directory will be ./src/main.js

The initial project file structure:

Project (root)
  |_ src
    |__ main.js

2. Create package.json file by running npm init command in the terminal

• The npm init command creates the package.json file in the project's root directory
• package.json is a file that contains information about the project. It contains:
  - metadata - project's title, version, description, author, etc.
  - list of the packages/dependencies required for the project
  - command line scripts in key: value pair format that you will later use npm to run to perform certain tasks
  

The project file structure after this step:

Project (root)
  |_ src
    |__ main.js
  |_ package.json

3. Install the Babel

• To install Babel, we must install two Babel packages:

npm install babel-cli -D
npm install babel-preset-env -D

• babel-cli package includes Babel command line tools
• babel-preset-env package has the codes that map any JavaScript ES6+ features to ES5
• the -D flag instructs npm to add each package to a property called devDependencies in the package.json file
• Once the packages are listed in the devDependencies property in package.json, other developers can run your project without having to install each package dependencies - They can just use npm install and run your project. The npm install instructs npm to look inside the package.json file and automatically download all packages listed in the devDependencies property

After installing the babel packages with npm install, you will find a new directory created in your project's root directory named node_modules with all the Babel packages and their dependencies inside the folder

The project file structure after this step:

Project (root)
  |_ node_modules
    |__ ...
  |_ src
    |__ main.js
  |_ package.json

4. Create .babelrc file and set the source code version (to ES6+)

• Create .babelrc file in the root directory by running touch .babelrc
• Then add the following object property inside the .babelrc file:

{
  "presets": ["env"]
}

["env"] instructs Babel to transpile any JavaScript code in ES6 or later (ES6+) to ES5.

The project file structure after this step:

Project (root)
  |_ node_modules
    |__ ...
  |_ src
    |__ main.js
  |_ .babelrc
  |_ package.json

5. Add the build script in package.json to transpile the codes

• Before you run the Babel command to transpile your ES6+ codes to ES5, you must add the script that instructs Babel to do so under the "scripts" property inside the package.json file:

In the package.json file, add the build object to the "scripts" property:

"scripts": {
  ...
  "build": "babel src -d lib"
}

• babel - the command line call to transpile the codes
• src - instructs Babel to transpile all codes inside the src directory
• -d - instructs Babel to write the transpiled ES5 codes to a directory
• lib - the destination directory. The transpiled codes will be written to a directory called lib

6. Run the build script with npm

• The final step is to use npm to run the build script you added in the previous step

  npm run build

This runs the "build" script inside the package.json file, which instructs Babel to transpile every code inside the src directory to the lib directory.

The final project file structure:

Project (root)
  |_ lib
    |__ main.js
  |_ node_modules
    |__ ...
  |_ lib
  |_ src
    |__ main.js
  |_ .babelrc
  |_ package.json