A quick guide for package.json dependencies management

Gabriel José Oliveira — Thu, 25 Nov 2021 00:49:06 +0000

If you've just studied html, css and basic javascript and are starting with some framework that uses node, like react, you may have some doubts about managing dependencies.

So let's take a look at some useful commands and get rid of the fear of play with package.json!

let's start

First, let's create the package.json file using the following command in the terminal:

npm init -y

With this command, we generate a standard package.json file like this:

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

When working with node, some dependencies are used for development purposes and others will remain until the end. So we will have two fields:

"dependencies": {},
"devDependencies: {}"

Let's start by installing a normal dependency and then we'll pass it on to the development dependencies and understand how to manipulate their versions. Let's use express as example:

npm install express

"dependencies": {
    "express": "^4.17.1"
  }

Let's understand what this symbol and numbers represent:

"dependencies": {
    //          prefix
    "express": "^    4.     17.    1",
    //               major  minor  patch
  }

Patch: normally, when a bug is fixed, the patch value is updated.

Minor: when new features are added but compatibility is not broken, the minor value is updated.

Major: when new features are added and there is a break in compatibility with previous features, the major value is updated.

Prefix: some symbols used by the node to update dependencies using the npm update command, such as ^ or ~.

We can use them to install a dependency like: npm install express@~2.0.0

When we use the "^", we are saying that we only want to keep the "patch" and "minor" up to date.

When we use the "~", we are saying that we only want to keep the "minor" up to date.

Without the prefix we are looking for an exact version.

If we use "-E" like npm install express -E, there will be no prefix and the dependency will never be updated.

Now, what if we want to move express into the "devDependencies: {}"? For that we use the following command:

npm install express --save-dev

And with that our express will be inside "devDependencies: {}":

"devDependencies": {
    "express": "^4.17.1"
  }

To get our express back to production dependencies, we use the following command:

npm install express --save-prod

Finally, we can use npm install express@latest to get the latest version (may not be stable) and npm uninstall express to uninstall the dependency.

To list all our dependencies, we can use npm ls.

But sometimes our projects have a lot of dependencies, so if we just want to see the main ones we've installed, we can use a depth control like:

npm ls --depth=0 and keep increasing.

To check if any dependencies are out of date we can use npm outdated and we will be informed of updates according to the prefixes used.

I hope you have enjoyed!

And if you have any other command tips, leave it in the comments.

I made a web game and I need your opinion

Gabriel José Oliveira — Thu, 04 Nov 2021 18:40:43 +0000

Hello World! This is my first post here and I would like to show you my game, talk a little about it and ask your opinion about.

Game: (https://labirinto-sequencial-psi.vercel.app/tutorialE.html)
GitHub: (https://github.com/gjoliveira/Labirinto-Sequencial)

In the game menu there is a link for you to leave your opinion and report any bugs, let me know what you think of the ideas execution and if there is anything I can improve. So far, the game has performed better in Chrome and Edge browsers.

As you can see, on github I linked the project and explained a little bit about it, the article from which the idea was taken is not in English but let's talk more about the premise below.

The idea and the rules

The project's idea was for students to answer questions while walking through a different maze, the maze is composed of colored ribbons glued to the floor, which must be passed in order: blue, red and yellow.

Wrong collor? go back to the beginning. Beat the team of students who reach the end of the maze by correctly answering the questions.

Now doing it virtually

In the "live action" game, it may take a while, but the virtual version will run quickly. So I made new rules and things that only a virtual environment offers and increased the playing time.

There's also a step counter, timer and life hearts to add some challenge.

How to do this?

There are several frameworks and engines for games, but as I was already studying javascript I decided to bet on the web environment and on Phaser Js framework.

Phaser has a simple system to understand, each scene in the game is a class with 3 functions, one to load files, another to arrange game objects, and the third is a function that updates every time.

Simple, but I had never done anything like it and the project took 2 months. I didn't have a good knowledge of object orientation at that time.

I try to be talented in the art world, but that's another story 🤣, the game was all done in windows Paint, with the exception of the main character's sprite and some other objects.

Reviews about our projects make them better

I don't know how it's performing on other devices and I need to know if I'm on the right track. Please, leave your comment. 😉✌

DEV Community: Gabriel José Oliveira