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

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

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.

[00:00] 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.

[00:18] It also includes support for JSX as well as some other plugins.

[00:22] 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.

[00:42] 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.

[00:56] 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.

[01:10] 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.

[01:22] 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.

[01:38] 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.

[01:48] 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.

[02:02] 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.

[02:26] Let's run it with those two options selected as well and see what changes.

[02:33] 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.

[02:47] 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.

[02:58] 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.

~ 7 years ago

what about the dist/main.css file we can see in your example ? is it going though babel too ?

It is less meaningful as babel is aimed at js, but I'm currently trying to load css files in components, using webpack, with an app running with babel.

Google would not reveal much about it. The main problem I guess is that the css files do not get transpiled to the directory the js files go to. Do you have any feedback about it ?

Trevor Miller
Trevor Millerinstructor
~ 7 years ago

Hey Ben! The <link href="dist/main.css" rel="stylesheet"> in index.html is simply a placeholder for adding styles in a template I use - we never actually wired up styles for this lesson, so I should have removed it from the code; sorry for the confusion!

Babel is just for JavaScript transpiling. So, since you are using Webpack, you can use Webpack loaders for CSS building. One of the Egghead instructors, Kent C. Dodds, has made a lesson showing how to do this.

I hope this helps!

~ 6 years ago

I think this video should be updated to use 5.8.20 of babel or update it to make it work with the current version of babel. Right now it throws an error suggesting that you install babel-cli

Ben Barreth
Ben Barreth
~ 6 years ago

I agree - the video is out of date. The latest directions to get Babel 6 working (at the time of me writing this on 04/26/16) are:

  1. uninstall babel (if you already installed it as advised by the video) using this command: npm uninstall babel --save-dev
  2. npm install babel-cli babel-preset-es2015 --save-dev
  3. Create a .babelrc in the root of your project containing the following text: { "presets": ["es2015"] }

All other setup directions from the first video should then work for you.