Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Setup

Let’s get our development area set up ready for coding. In this lesson, I’ll show you how to install some helper tools and get set up for following along with the course.

Related Links

1.2 Setup

Hi folks. ES6 is now an official standard but most mainstream browsers haven't yet implement all the new features. And a lot of the support they have added is disabled by default and needs to be enabled with configuration. This is where Babel comes in, it's a transpiler. We feed lovely shiny new ES6 into it and regular ES5 supported by all mainstream browsers comes out of the other side. Babel can be used with many different tools and frameworks. The website lists all of the different tools and software that can be used with Babel and gives instructions on how to install and use it for each of them. There's also a wealth of information about ES6 on the Babel website. So I'd recommend that you take a look through that also. We'll be using Grunt to run Babel, so you'll need to have Node.js installed. If you don't have Node.js installed, head on over to the website at nodejs.org and download the latest installer for your platform. So first of all, let's make sure that we've got the Grunt CLI installed globally so that we can run Grunt commands. So we use the -g flag to specify that it should be installed globally. So now let's get our development area set up and ready to work through the code examples throughout this course. So let's create a new folder somewhere. I'm going to put mine in my user folder and we can just call it es2015. So there's a few files that we're going to place into this new directory, I've got these already prepared on my desktop. So into the root of our new folder we can put a simple web page called index.html. And we're also going to want to put the Grunt file and the .babelrc files. We'll come back to those files shortly. For now, let's just put them in the folder. And we should also create a new folder called js. And inside this folder, we're going to put a JavaScript file called ES6. So first of all, then, let's open up the ES6.js file that we've just dropped into the js folder, and we can add some basic boilerplate to this file. First of all, we'll make sure that our code is always running in strict mode with the use strict statement. And then we just want to add an immediately invoked function expression and as we're working through the code examples all of our test code will be added inside this. So let's go back to the command line now. And we want to move into the directory that we just created. And first of all let's install the Babel Grunt plugin. And we should also install Grunt. So let's head back to the editor now and we can update the grunt file. So this file needs to be a node module And let's also put this into strict mode. And we can now define the configuration for the Babel task. So we use the initConfig method to specify configuration for the Babel task. So let's have some options first of all. And the option that we want to add is to enable source maps. Next let's specify a target for the task. We can now configure the files that we're going to be using. So the output file for this task is going to be a file called es5.js, and that's going to go into a directory called dist. So that is the compiled code. And the input file is going to be the es6 JavaScript file that we added to the js directory. We use the files object format to specify the output file as the key and the input file as the value. Next we need to load the Grunt Babel task. This need to happen after the initConfig method. And lastly we can register the task so that we can run it. So we've added a task alias of es6, so that's what will run on the command line. And when we run that on the command line, that will run the babel task. Great, so that's Babel installed and configured, but before it will transform any code for us, we need to enable a presets or some plugins. We use the es2015 presets, which is a collection of plugins that each handle transforming a particular es6 feature. We'll need to install this preset first via MPM so let's head back to the command line. So now let's open up the .babelrc file that we added to the root of our project earlier, and we can enable the preset that we've just installed. And now lastly let's just update the index.html file, that we also added to the root of the project. And in here, let's just add a link to the complied es5.js file because we'll be using this page to view the outputs of our compiled code. This is all we need to do for now. We can now add some ES6 code to the es6.JS file in the js folder, run our Grunt task and the page will be able to use the compiled es5.js file in the disk folder. So now that we've got our development environment set up, we can move on to the next lesson and start looking at some of the new features of ES6. Thanks for watching.

Back to the top