Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:40 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Babel on the Client

In this lesson, we’ll set up a basic project scaffold with Babel. We’ll use Browserify to bundle our modules together, and we’ll use the Gulp task runner to tie our build workflow together with Babel into an automated process.

Related Links

1 lesson, 02:53

Free Lesson

2.Getting Started
2 lessons, 14:42

Free Lesson
Babel on the Client

Babel on the Server

3.Experimenting With ES6
3 lessons, 18:09



Other Cool Stuff

1 lesson, 04:28


2.1 Babel on the Client

Hi. My name is Jason Greene. And welcome to this short course on full stack ES6 with Babel. In this lesson, we're going to set up our skeleton application to run ES6 in the browser. I'm going to assume that you already have node.js set up and installed along with NPM, the node package manger. And just to give you a heads up, I wanted to show you a couple of other tools we'll be using. We're going to be using browserify so that we could write our code in the style of nodeJS modules. This makes it a lot easier to write isomorphic code that runs in the browser and the server. And we'll be using Gulp as our build tool to put it all together. So to get started, let's make ourselves a new folder to start our project. I'm gonna call it babel-starter. So in this folder, if we run NPM in it, it will take us through the process of creating a package json file that we can use to install all of our dependencies. So name, that's fine babel-starter. Version is fine, description starting project for babel, browserify, gulp projects. We don't really need any of these at the moment, we can now start installing our development dependencies. I'm installing these with the save dev flag so that it will get added to my package json. We're installing Babel. Optionally you can install Babel globally so you can use it on the command line. We need babelify which is a transform that allows browserify to package together all the code but also convert it using Babel on the way in. We'll need browserify and gulp, our build tool, and finally vinyl source stream. This allows us to use modules such as browserify, which are not strictly set up out of the box to work with gulp. So here, back in our package json file, you can see all of our dependencies including their versions. Okay, we're going to now have to create our gulp file, which will tell gulp the tasks we want it to do. So, that we can build our project. I'm just dropping in here a little client folder, we're gonna have a look at the contents of that now. So this is where our client side code will go, including our index HTML file and our JavaScript files and folders. You could also have styles in here. If we open it up, you'll see that we have, inside client, a really simple index file. And, inside the app folder, we have the main.js file. It's requiring some util here and then, it calls the utils.count. So inside utils we have some simple counting function. Now already you'll see here that the code we have for this example is not standard looking JavaScript. At least it's not ES5. It's ES6, so none of this code that we have here we can run directly in the browser. We have to write a gulp file that will pick up this code here, resolve dependencies, stitch it all together and transform it into ES5 using Babel. So let's start that now. Create a new file and we're just gonna start writing it as normal JavaScript. Gulp uses standard JavaScript to write its configuration files. Now we need to import all of the node modules that we had in our package json file. We'll need gulp, babelify, browserify, and the vinyl-source string. You'll notice we haven't included Babel here. That's because babelify makes use of the Babel command line tool to transform our code. Oops, little typo there. Time to build our first gulp task. This will be our build task. We'll need to start with some browserify configuration. We need to tell it where all the entry points are. Now in our case we have just one, client/app/main is our entry point JavaScript file. That's our root file that calls in all the rest of them, and we can put debug: true. Next we need to transform the browserified code, using this babelify middleware sort of function here. Then we need to bundle it up. Bundle is a browserify terminology, and it just means that it will stitch all of the transform babelified pieces of code together into one file. And then we can pipe that file to app.bundle.js. And then pipe that again to our distribution folder. So we can set a gulp destination and set it to a dist folder. It doesn't matter if that folder doesn't exist, gulp will take care of creating that for us. Now I should mention you won't see over here on the left the node modules folder that's because I generally have that folder hidden using sublime text user settings so comment that out just so we can see a bit better what is going on. So we should be able to run that task now. If I switch back to the terminal and run gulp build. You'll see, that's reported using the gulpfile, starting build and finished build after 24 milliseconds. So what's changed now? We have a dist folder and inside the dist folder we have code that kind of resembles what we had written, but it's a little bit different. You can see each of our modules. This is our main file, here. And this is our utils file here. You can see the browser file has included them all, concatenated them, but it's also wrapped them all in its own crazy voodoo code, which basically manages the dependencies for us. You can see that utils gets assigned a dependency number, too. And the cool thing is you don't really have to know about how this works at all. Just know that it does work, and you can get a source map down here so that you can debug your code by the separate files rather than having to navigate this browserfied file. The next thing you'll notice is that our ES6 code has been transformed into ES5. If I open utils, index you'll see that I was using one ES6 feature here. Where you're not obliged to put in a key and a value for object properties where the variable name is the same as the key that you want. And you also see that I used an arrow function which is a kind of function shorthand where you parse the arguments first and then the function body directly after a arrow created by an equals sign and a greater than sign. So, if we look at our output, we have count has been added over here and this arrow function is being converted into a normal anonymous function. But what about our index file. Well, we're going to need to tell it to include app.bundle.js and I think so that everything is clean we should copy it to the dist folder. Now at the moment, we're just copying it straight over, and there's no changes being made. But we may want to have changes being made to the index, and other html files, before they get copied over. So it's a good idea to include them in the build process like this. Gulp.task('copy'), and it's as simple as gulp.src('client') Slash index.html. That's the thing we want to copy and then we can pipe it to gulp dest for destination, straight into the dist folder as well. This is one thing I really like about gulp over some of the other task runners, like Grunt, for simple stuff like copying and moving your files you don't need to get any plugins and it will just work out of the box using gulp source pipelgulp.dest. Finally we'll put in a watch task so that we can run these other two tasks whenever something changes. That's going to help speed up our development, we're going to tell it to watch pattern of files and folders. So anything in client and any subdirectories, any js files, if they change we're going want to run the billed task again. And if any of our HTML files get changed, we'll run copy. And so that we don't always have to type in gulp.watch. We can give gulp a default task where we run all three. So now when I run gulp, you'll see it copies, builds, watches and if we open up our index file you'll see our script is running, client side code started, and our counter is running, as well. If we make a change to the code, to, let's say, start the count at 100, gulp will run the build, task again, and if we refresh you'll see that our script now starts at 100. And that's all for this lesson. Check back in for the next lesson where we're going to set up Babel and ES6 in the server, and even write a bit of isomorphic code that can run in both. Ciao.

Back to the top