To get through the tutorial you need:
- A bash shell or terminal.
If you're a Windows user then you can a tool like cmder or even better: set up your Node.js development environment with WSL 2. With that out of the way, let's hop into the tutorial!
Create a new npm project
To get started, you'll need to create a new folder in a place that's easy to remember. I have a
Dev folder that I like to keep
all my projects, but you can put it anywhere. After navigating to a folder, make a new directory to keep the project.
After making a new directory and running
cd to change into it, initialize the folder as an
You can use the
-y flag to create it with all default values, or you can leave it off and follow the prompts to manually
set the appropriate values. I will run:
Running this script creates a
package.json that organizes the metadata, scripts, and dependencies for the project.
Later in the tutorial, we will configure the
package.json file more, but first, you want to install the libraries that make up the core of the development environment.
Set Up Babel
Babel is a very powerful tool that has completely changed how developers work today. To get access to these features, first, let's install the packages:
@babel/core: The core of the Babel compiler
@babel/cli: Used to compile files with Babel from the command line
@babel/node: Another Babel CLI tool that works exactly like Node
We could dive much deeper into any of the individual layers, but this tutorial is focused on the setup. If you would like some posts talking more about Babel, reach out to me on Twitter or by email and let me know!
We also installed
nodemon, but we will come back to those later. First, let's finish configuring Babel.
but in this case, we will use a
.babelrc file. First, create it by running:
Inside of the
.babelrc file add:
presets key is an array because you can add any number of presets. We just need to add one, but if you want to experiment with other presets
you just need to install them and add them to the array in this file.
After adding the preset to the
.babelrc file, we can set up the
index.js file imports. From the terminal create the file with:
Inside of the
index.js file add:
await syntax for promises.
console.log statement is there simply to test that the file is running.
The only that is left is to set up the
npm scripts and run the file!
package.json file has a
"scripts" object that allows users to include custom command-line scripts that can be run with npm.
These scripts are completely user-defined, but there are a few standard scripts that you will see in most projects. First, let's create the scripts, and then I'll explain more about them.
Replace the existing scripts section with the following:
"start" script uses
index.js file with.
"dev" script uses
nodemon to run watch the file for changes and re-run it with
babel-node anytime there is a change.
"build" script uses Babel to compile the code and output the result to the
You can run any of these scripts with npm by using
npm run *script-name* where name, in this case, will be
For the start script, you can just use
npm start, but all the others will use
npm run build).
To test out the file, run:
"Hello World" was output in the terminal, then everything is set up correctly!
Wrapping it up
If you have any questions or issues, feel free to message me on Twitter.