Tools save us lots of time, they help catch our mistakes and help automate many tasks. This post covers some of the things that we want to automate, and use tasks for, that are going to make our development environment far easier.
Table of contents
First up is package management - or dependency management.
🎉 Download it free!
Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.
- 31 pages of deep-dive syntax, real-world examples, tips and tricks
- Write cleaner and better-structured programming logic within 3 hours
✅ Success! Check your email, enjoy.
As an extra bonus, we'll also send you some extra goodies across a few extra emails.
These projects are typically called “packages”, or “modules”, and are published by developers from all around the world. A package manager does simply what it says it helps us manage the packages that we want to use in our project.
Local HTTP Server
Next we would like to have some kind of real world development server that serves as our project locally. This will later include things such as library load, compilation on the fly when we save a file and much more. Having a proper server allows us to develop real applications that can make HTTP requests to a backend as well.
Another task that we’d like some help with is the automatic transformation of ES2015 or ES6 code down to ES5 and we’ve looked at this in the previous post.
Think of them as individual units that we want to make sure are included in our project when we deploy our application. So essentially we need to bundle them all together. Where pack allows us to put all of these dependencies into a single file without doing any extra work on our end. It also handles more advanced techniques such as coach blessing for lazy loading.
Finally, we need to introduce something we call linting. Linting is essentially analysing our code on the fly to pick up any potential errors. Typically when we install a linter we will be given warnings or errors in a terminal window. Or you may see our familiar red squiggly line. If we’ve done something wrong. So here are the tools we’re introducing today that help us in doing all of these things. We have. Node.js, NPM, Babel, webpack and finally ESLint. Let’s jump in and find a little bit more about each of them by showing you the bigger picture of how they all linked together.
Let’s begin with Node.js. Node.js is going to help us run our local development setup.
Once we’ve installed Node.js that means it’s now accessible through the command line or the terminal.
With Node.js we ship something called NPM the package manager that we’d like to use for Node. Before we can manage any package however we must in fact tell NPM what packages we’d like to install in this project. For this we need something called a
package.json which lists our packages and the package versions that we’d also like to install.
Now to create a
package.json what we need to do is simply run
npm init when we start a new project. We can then run an
npm install command and provide any package names we’d like as the arguments to this command. This will then download the packages from NPM’s registry and save the names and their versions in our
package.json. All of these packages exist as open source projects and are published as versions to NPM so that we can go ahead and download specific releases.
This means that if someone else downloads our project and runs the same
npm install they’ll also be given the identical packages and versions. The
package.json is something that we would also check in to version control such as git. So for instance other developers on our team can join our project and get set up within just a few seconds. Once NPM has finished downloading our packages, it then creates a new folder inside our project. This folder is then called our
node_modules this is where all of our packages exist.
This means that webpack, Babel, ESLint and any other packages that we’d like to include are now available locally in our project. Our project at this point would be ready to take on all of the tasks that we outlined at the beginning of this post. If you’re new to all of this workflow tooling it does sound and look more complex than it actually is.