In order to setup Babel in your project, you need to have Node JS installed in your system since we gonna use NPM to install it and guess what you don't need to know anything about Node JS, we just install it for the sake of downloading packages from NPM.If you haven't installed Node JS yet please click here to download it and install it just like every other software on your computer by clicking next, next, next then at last finish.
After Node JS installation open your terminal if you are using MAC OS or any Linux Distribution or if you are using Windows OS open your Command Line and again you don't need to know anything about the command line.To confirm that Node JS is successfully installed in your system run the command
npm -v ,if it is successfully installed it will print the version of npm you are using.
The command above will work on any Operating System as long as you have Node JS installed successfully.Next step go to Babel and navigate to where you can set it up, at the time of writing this tutorial the website was as follows
There are many ways to install Babel depending on what project environment you are using such as Webpack, Grunt or Gulp which for now we aren't using them since we'll have a simple project that we'll use ES6 code in it that we wanna compile down to ES5 we'll click the option CLI in Babel built-ins.It's possible to install Babel globally on your system but it is advised to install it locally on each project so as to be able to manage the Babel version in each project independently.Go to your terminal and navigate to where your project is.
NOTE: The above processes of installing Node JS and NPM are done only once.
Run the command
cd /the/location/where/your/project/is , then run
npm init to initialize the directory with a node packaging system, the npm system will ask you several simple questions that you can choose to answer them or not.The information you give will be used to create a package.json file for you.This file will be used to manage all the dependencies of your project that you'll download from NPM.We'll cover more about this file in the future tutorials.
If you check in your directory, for me it's the directory es6 that I placed on my desktop (yours could be in drive C: or D: or anywhere you put it) you'll see the file package.json in it.Use your favorite text editor to open the directory es6.I'm using Visual Studio Code and that's how my package.json file looks like since I didn't choose to fill anything in the questions that NPM asked me.
Go back to the terminal or your command line and run the command
npm install babel-cli --save-dev , here you are telling NPM to install babel-cli for you and save it in the package.json file as a developing dependency.Once NPM has finished installing babel-cli this is how your package.json file is gonna look like.
Curious to know?Just after running the command above a new directory node_modules just got added to your project.What happened?Should you delete that directory?It's almost 15MB, isn't it gonna increase the size of your project and make your website slow?
Well, that directory (node_modules) is the one where NPM stores your dependencies.If you open it you'll find a lot of other directories and sub-directories, must confusing but trust me you'll never touch this directory and you don't even need to know what's in it.When your ES6 code is compiled you won't need this directory anymore.Don't worry, you'll see it very soon.
In your package.json file go into scripts and add the line
"build": "babel src -d lib" .We'll use this script to compile our code in the future.I'll explain more what this command does very soon.
NOTE: Since it's a json format make sure you put a comma (,) in the previous script (if any) before adding the script mentioned above.
Create a .babelrc file in your project's root directory where your package.json file is located and write the code as shown below
What we've done is the .babelrc file is to tell Babel that we gonna be writing some ES6 code and we want it to compile our code to ES5 using a plugin babel-preset-env which we have installed it yet but we can install it using the following command
npm install babel-preset-env --save-dev and as usual your package.json file will be updated automatically and the babel-preset-env will be added in the devDependencies.
At last, this is how my package.json file looks like.
Remember we previously added the script
"build": "babel src -d lib" ?This is the script that we'll use on the command line to compile our ES6 code, what the command is doing is to tell babel to check in the src directory and fetch the index.js file (since above there in package.json file "main":"index.js" it was declared that index.js as our entry point by default) and compile everything in it into ES5 and put it in the lib directory.Let's give it a try.Make a directory src and add a file index.js to it, write a simple alert in it.
Now run the command
npm run build on your command line which will trigger the command we declared above in the package.json file.If everything went well the compiler will automatically create a lib directory and add an index.js file to it.The index.js file in the lib directory is the one that we'll attach to our HTML page since it contains our compiled ES6 code to ES5.Make an index.html file in the root directory of your project and link the lib/index.js file on it to see if you'll get the alert.
And YEEEEEEEES it worked!
Now let's try some ES6 syntax and see if it's gonna work.Go to src/index.js and delete the alert code we typed just now and type some ES6 code in it.You can copy mine below for testing
Run the command
npm run build on your terminal, then take a look at the file lib/index.js and look at how our code got compiled into ES5.
Now run the file index.html and check your browser's the console screen.
If everything went well you should be able to see that your ES6 code got compiled to ES5 and the browser can understand it without any problem.
Enjoy coding in ES6....