Setting up Babel

A free video tutorial from Andrew Mead
A Full-stack Developer & Teacher
Rating: 4.6 out of 5Instructor rating
4 courses
405,701 students
Setting up Babel

Lecture description

In this lesson, you’re going to set up Babel. This will allow you to take advantage of all the latest JavaScript features such as the ES6 import/export syntax.

Learn more from the full course

The Modern GraphQL Bootcamp (with Node.js and Apollo)

Learn how to build GraphQL applications using Node.js. Includes Prisma v1, authentication, Apollo Client, and more!

23:24:42 of on-demand video • Updated November 2020

Learn and master GraphQL by building real-world Node applications.
Use Prisma v1 to store and access data from a production database.
Use Apollo Client to communicate with GraphQL from your web app.
Learn how to deploy and test your GraphQL applications.
Test your skills and gain confidence by completing more than 80 coding challenges.
Get access to a free 110-page PDF guide with lecture notes, code samples, and documentation links.
English [Auto]
In this video, you're going to move away from using graphical playground with the demo API and you're going to move towards Visual Studio Code and actually writing code to create your very own graphical projects. In this video in particular, we're going to be setting up our little boilerplate project with a couple of nice to have tools for local development, especially when we're working with well, A.J. s so I'm going to crack open my editor for the rest of the course. I'll be leaving the browser here on the left hand side and on the right hand side, I will have the Visual Studio code so he can quickly switch between the two. Lets go ahead and kick things off by creating a new directory for all of the code we're going to have in this course. I'm going to use Comando or the command here for your operating system to open the folder on the desktop. I'm just going to create a new directory. You can call it whatever you want. I'm going to call mine graphical course. This will contain all of the files and folders and projects we end up creating throughout the class. Let's create that directory. We're going to crack it open. And now we're going to focus on actually creating the folder for this first project. We can call that one something like graphical python basics. Perfect. So we have the graphical course directory for all of the code in the course. And I have the graphical basics directory for the specific stuff we're going to explore for this first project since we will be writing some code in this lesson. I wanted to remind you that there is a lecture zipp available for every single lesson in the class where we actually write some code that Zipp contains all of the code up until that point in the course. So if you lose your project or your projects not working, you can always download the lectures app to compare my code to yours and figure out where you went wrong. So don't forget lectures that for every lecture where we actually write some code to kick things off, what I want to do is install and configure a tool called Babul in our project. Babul is a tool that's going to allow us to use the most advanced cutting edge JavaScript features. Today, in particular, we're going to be able to use the S6 import export syntax. Let's go ahead and kick things off by pulling up the website for Babul. That is Bab El Babille j. S dot i. O. If you come from a more front end development background, you might have actually heard of or even used babble before, particularly if you've worked with react. If you come from strictly a node jazz background, it's likely you've never heard of or even used babble before. But that's OK. Setting up babble is actually really easy. We're going to be installing two NPR modules and adding about five lines of configuration code to our project. Then we'll have Babulal set up and we'll be able to forget about it for the rest of the class. In the end of the day, Babble is a JavaScript compiler. So we write some code, we send it through babble and babble spits out other code. This allows us to take advantage of cutting edge features in our code, but still have code the output from babble, which runs in a wide range of environments. So if I'm writing an application, I might want to take advantage of the great features offered up by the Arrow function. But if I want my code to run in an all older browser like Eytan, I'm going to need a way to actually convert that arrow function to something that Eytan understands because Eytan does not and never will support the Arrow function. What's the solution? The solution is to just pass that code through Babul. Now, as I mentioned in our particular use case, we're going to be using Babul so we can access the S6 Import-Export syntax from note. You can learn more about Babille by actually seeing it in action and heading over to the try it out page. On this page we type some code on the left hand side. The output ends up on the right hand side. Lets go ahead and give this a try. I'm going to create a simple statement const my function, setting an equal to a brand new arrow function that takes no arguments and has no function body. So on the left hand side we had the code that we would write. On the right hand side we have the code that Babul would spit out. We can see that CONST has been converted to VAR since var is understood by a wider range of environments. And we can also see that our arrow function has been converted into a standard function, something that is also supported in a wider range of environments. So this is just one example of what Babille can do. We can actually teach Batbold to do almost anything. If you want to learn more about how to configure Babille, you can head over to the setup or docs page that we're actually going to go through that process together. Like I said, it's super simple. Install two things at about six lines of code and we're all done. So let's go ahead and actually knock that out from Visual Studio Code for this course. I am going to be using the integrated terminal provided by Visual Studio Code. If you're on Linux or Mac OS, you're more than welcome to use that as well. If you're on Windows, though, I suggest using a terminal emulator so you can access these same commands that Mac OS and Linux users have access to. That'll make it easy. Year to follow along with the videos, you can grab one of these terminal emulators such as Commander over at s.M DSR Commander Dot Net here, you need to download the application, run it, and when you do, you'll be brought to a new terminal window where you can access all of the same commands that I'm about to run. I'm also going to be using some keyboard shortcuts in visual studio code for this advanced class. I recommend you get familiar with the keyboard shortcuts for your operating system as well. If you're not sure what a keyboard shortcut is for a particular command you want to perform, you can always search for it using the command prompt. So in the end of the day, the only one you actually need to remember is the command to show all commands for me and my particular OS and setup it is Shift Command P. You can go ahead and close all of the tabs to actually see this background panel and see what the keyboard shortcut is for you. Now I can search for something like toggle terminal and I can see that for me it is this keyboard shortcut that is control plus the back tick. So I'm going to go ahead and run that and bam, the terminal pops open. So we will be using keyboard shortcuts for those operations. I recommend using the command pallet to find the keyboard shortcut and then memorize it right here. We're going to start by changing directories into the Graphical Basics Project, CD space, graphical python basics. From here, we're going to generate a package JSON file for this project and we're going to install the two modules necessary to get Babel up and running. Since Noad is a requirement for this course, you should be familiar with generating a package, JSON file and installing modules. I'm going to be using NPM in it to generate my packaged JSON file for this project and I'm not going to actually change any of the default values. So it's going to ask me for about seven different values. I'm going to use the default one by just hitting enter about seven or eight different times at the end. It asks me if this package JSON file looks good. It does. I type, yes. And enter and we're done. Now, all that command did was it generated our package JSON file. We're going to have to run an NPM installation command to get those two modules installed for Babille. So right here I'll use Clear to clear the terminal output and we're going to use NPM install to install those two modules. The first module we need is Babul hyphen. Kellye, this is going to give us a new command that we can run to actually pass our code through Bable and have Babille compile it. I'm going to specify a specific version using the at sign. So Babille Seelie at six point twenty six point zero, which is the latest. And the other module we're going to need, which is actually going to process Import-Export is Babille Hyphen Preset Hyphen N.V.. So this allows us to run a command to compile Babul. This tells Babul exactly what it should change. We're going to provide a specific version number for this one too. That is at one point seven point zero, which is the latest. We can go ahead and run that command that's going to get in both of those installed. Then all we have to do is write about four lines of configuration code to tell Babul to use that N.V. preset. So our Import-Export code gets converted correctly and is compatible with Node. We can add a single file to our project to get that done. You want to toss this in the root of the Graphical Basics project? We need to call that one Dot Babille Arcy. And in the end of the day, this is just a JSON file where we can figure out how babble works. We're going to provide our route object with a single property, the Presets property. So right here in double quotes presets, the value for Presets is an array and we provide as strings the names of all the presets we want to use. In this case, we install just one. So we're going to provide just a single string in this array. Ian V. Excellent. And there we go. Babul is all configured and ready to go for the rest of the class. Now, before we can actually run any code, we need to create a source directory and some sort of entry point for our application. I'm going to create a source folder in the root of the project called Sarsae. And in there I'm going to create the entry point for this application and I'll call that file something along the lines of index dot js. We can add some content inside of here, like a simple console log call just to make sure the file runs successfully. Right here, something along the lines of hello graphical or any other generic message will get the job done. The last thing we're going to do before we actually run this file is to make a new script in packaged JSON that allows us to run things through babble. So right here I'm going to create a new start script. So we'll add a new property onto the start object. We will set its value equal to a string as well. And this string is going to be the. Following Babul hyphen Noad space, then the path to our final source, Boadicea Index J. S Babille node is what we're going to end up using for local development purposes only. We'll talk much more about how to create and run this project and production later in the course when we actually deploy our projects live to the Web. But for now, this is a fantastic way to get started if we go ahead and save package. Jason, we can run that start script right here. NPM run start. I'm going to run through the script and what do we get? We get our little message showing up. Hello, graphical prints. So when we run that command, Ababil grabs the file. We specified it passes it through the Babul compiler using the configuration we provided. Then the output file is what actually runs the output file. Is it saved anywhere to our hard drive? It's just executed by the command itself. Now, currently, we're not using any feature that would be unsupported otherwise, so we're not getting any real advantage from Bable. That's all going to change, though, in the very next video when we start exploring the S6 import export syntax. So as long as you're seeing Hello Grauwe Keywell printing right here, you are all ready to continue on to the next lecture. And we're going to dive a bit deeper into how that syntax works because it's something we'll be using throughout the entire class.