This lesson is out of date and uses an older version of Babel.
It also includes support for JSX as well as some other plugins.
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 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.