Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Writing next generation JavaScript with Babel 5 (out of date)


    Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

    This lesson is out of date and uses an older version of Babel.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Babel is a JavaScript compiler that lets you use next generation JavaScript today. That includes ECMAScript 6 or ES 2015 as well as ES7. Some of the features are already in Babel, and it will continue to be updated with future versions of JavaScript.

    It also includes support for JSX as well as some other plugins.

    I'm going to create a source folder where we'll place our futuristic JavaScript syntax that has not yet been put in all modern browsers. We'll create a dist folder, where the source folder code can get transpiled to. Then inside our source, I'll create a main.js file. Let's write some new JavaScript.

    Let's use the new ES6 let variable and template strings. I'll say let answer = 42. Then we will alert that the answer is answer.

    Now to install Babel, I'm going to run npm install babel--save-dev. I'm going to double check real quick and make sure that got installed OK. Instead of my package of JSON, I now have Babel in my dev dependencies.

    Let's use that and there are a lot of build tools that you can use with Babel. You could use Gulp or Grunt or Webpack. But I'm going to use npm scripts. Instead of my scripts object, I'm going to create a new build script.

    We're going to use the Babel CLI to run Babel and then give it our source directory. Then we're going to tell it to go out to the directory of dist. Now let's run that, npm run build.

    Now, it looks like in the command line output that main from source was put into dist. Let's double check that. We've got, instead of dist, a main.js file.

    It looks like it's added use strict, because that's default in ECMAScript 6. Then we're using the var keyword instead of let for our answer variable. Then we're using sting concatenation instead of the new template strings.

    It looks like Babel was transpiling our code correctly. A few more options in the Babel command line interface that will be helpful is you can run -w, which will watch for any files that you are transpiling and it will automatically transpile them when they're updated, so you don't have to rerun the npm script. Then you can also tell it to output source maps so that you can debug easier.

    Let's run it with those two options selected as well and see what changes.

    Now, instead of dist, it looks like we have a source map. Then, if we make a change, let's change the answer to 43 and save. It's watching and it's recompiled our JavaScript. Now the answer is 43.

    Now let's link to this dist file in our main index on HTML I'm going to add a script. The source will be dist and then main.js.

    Close that off and let's run this in our browser and make sure it's working. I'll refresh the page and now the answer is 43.