# Babel JS

Babel is a JavaScript transpiler/compiler.

It's main purpose is to take your ES6 code that uses the latest and greatest features in JavaScript and create a new version of your that can run in older browsers.

Official Babel website (opens new window)

This video is a couple versions back but it explains generally how Babel works.

# Exercise Instructions

# Create a Private GitHub Repo

This repo will be your website that will use the Babel-compiled version of your script.

Call your repo hybrid-4-babel. Set it to private and invite your professor to the repo. Add a .gitignore file to the repo too.

# Clone and/or Init Git

You need to make a local copy of the repo. You can either git clone your Github repo, or git init on your local folder and then use git remote add to connect with our Github repo.

Be sure to do frequent git add, git commit, git push commands.

# Create your starter files.

Treat this like any website. You will need an index.html file at the root level, a css folder, and a js folder. Inside the css folder put your main.css file with some styles. Inside the js folder put your app.js file. This will be your original JS file that Babel will convert.

# Add the HTML, CSS, and JS

In your HTML, add a header with your name, a div where you can write some output, and some Lorem Ipsum type content.

In your CSS, add some styles. Make your page use a dark theme. Feel free to use materialize.css if you want.

In your JavaScript file you need to use the following features in your code:

At least one Promise
At least one function that uses async - await
At least one function that uses destructuring to extract properties from an object being passed to the function.

# Promise example

new Promise((resolve, reject) => {
  // there should be conditions for calling
  // resolve( ) or reject( )
  // be sure to pass a value
})
  .then((ret) => {
    //this function runs if resolve( ) was called
  })
  .catch((ret) => {
    //this function runs if reject( ) was called
  });

1
2
3
4
5
6
7
8
9
10
11

Promise video playlist (opens new window)

# Async - Await example

async function one() {
  let val = await delay(3000);
  console.log(val);
  //the second line will not run until after the first line finishes
}

1
2
3
4
5

More about Async-Await (opens new window)

# Destructuring example

function one({ id, name }) {
  console.log(id); // value of person.id
  console.log(name); //value of person.name
}
let person = {
  id: 123,
  name: 'Steve',
};
one(person);

1
2
3
4
5
6
7
8
9

More about Destructuring with Params (opens new window)

# NPM init our Project

We are going to use Babel as an NPM module in our project. So, we need to run npm init to create the package.json file

# Configure Babel

To use Babel, we need to install it and make sure that it is in our package.json file.

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

You can see all the setup instructions here (opens new window)

Then update the scripts section of your package.json file to add the command that we will use to run Babel.

{
  "scripts": {
+   "build": "babel js -d dist"
+ }
}

1
2
3
4
5

This is creating a script called build which will look in the /js folder for JS files and output them, with the same name(s), to a folder called dist.

NOTE: Remember to have the <script> tag in your webpage point to the correct filename in the dist folder.

Once this is done we can run our script at any time like this:

npm run build

Babel cli reference (opens new window)

We next need to add our Babel settings. We need to add another Node module:

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

And finally, create a babel.config.json file to access those settings.

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

1
2
3

You can edit or alter these presets at any time as described here (opens new window).

For example, if you wanted to target specific versions of browsers for your new script then alter your babel.config.json file.

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

reference for output targets (opens new window)

# Using Babel

Once we have Babel added to our project and can run it from the CLI anytime we want. Here is the official usage docs (opens new window)

But, what does it do when we run it?

If you have written the "build" script properly then it should find your JS file in the js folder, transpile it, and then output the new version, with the same name, in the dist folder.

Feel free to use a different name for your output folder.

Run your Babel build script after you finish writing all your JavaScript with the required features.

TODO

Have all three of the required features output a message to the HTML when they run.

The private Github repo should have both the original script AND your Babel-ified version.