Creating web platforms is often a repetitive task, so if we look at the projects, we find that there are many code libraries repeating every project.

There is a way to add these libraries to the project and install them automatically. You can also set the specific version for each one or always use the latest version. Have you thought about the time you could save?

There are currently several ways to automate web development using dependency managers, such as NPM, one of the most popular in the web developer community.

NPM is the acronym for Node Package Manager.
NPM is an online open source javascript repository, in addition, is also a command line tool that interacts with this repository. The goal is to install modules locally, manage versions and dependencies, making development faster.

 

How to use NPM:
 

Installation

First of all, as a node tool, you will need to install the Node.js.

After the installation, open your command line and verify the installed version of Node with the following command:

node -v v11.13.0

 

Node also comes with the NPM package manager. To know the version, use the follow command:

npm -v 6.9.0

 

Start package manager

After the installation we will have to create the file that will store the dependencies added to the project. To do this, at the command line, type the following statement:

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields and exactly what they do.

Use `npm install ` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
critec version: (1.0.0) description: this is a test entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to C:\Users\User\critec\package.json:

{
"name": "critec",
"version": "1.0.0",
"description": "this is a test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

yes

 

Upon completion we will get a package.json, which will serve as a dependency register and its versions.

To add dependencies, you can refer to the repository or existing modules. To know the name of the installation module is simple, just type the following statement on the command line:

npm install model_name

 

If you want to set the version you must add “@” in front of the name along with the version number, like this:

npm i model_name@1.0.0

 

If you want to remove dependencies, you must type the following statement:

npm uninstall model_name

 

After configuring all dependencies, you can enjoy the value of npm, portability and speed of development. Now when you start your new project just copy package.json and type the following statement at the command line:

npm i

 

After running this statement a node_modules folder is created in the project folder where all dependencies added to package.json will be listed. This way, whenever you start a new project you will be able to quickly get the most current dependencies in the repository automatically. Now that you have all the dependencies on your side, just call them in your project.

 

Advanced
 

Not only does NPM have the utility of installing modules, it also allows you to execute instructions or instruction sets using a command you create as needed. To do this simply edit the package.json file and create your own script.

{
"scripts": {
"your_script_name": "eco some_command_here"
}
}

To execute the created command, as it is a non-default npm command, you must type “run” before the name of the created script, as follows:

npm run your_script_name

 

NPM also has two global prefixes, the "pre" and the "post":
- "pre" is executed before the main instruction;
- "post" later;

For example with the command "npm i" we can run three scripts directly, just add the script in the package to "preinstall" and "postinstall".

 

Tip:

If you make websites without any current framework (which compiles all the code), you can automatically copy the necessary files to your project folder automatically. In the end, just delete the node_modules folder and add the “postinstall” script to your package:

"postinstall": "mkdirp //project/css //project/js //project/plugin/js //project/plugin/css && cp -r //project/node_modules/bootstrap/dist/js/bootstrap.min.js //project/js && cp -r //project/node_modules/bootstrap/dist/css/bootstrap.min.css //project/css && cp -r //project/node_modules/jquery/dist/jquery.min.js //project/js && rm -rf ///project/node_modules"

NOTE: If you use the Windows operating system you will need mkdirp installed..

With the previous statement, we can see that at first NPM will install project dependencies in the node_modules folder and then (“postinstall”) will create folders in our project and copy the files into the project, finally, will remove the node_modules folder.

So with just one command, we will have our project ready to start, with the most current bookstores, automatically.

 

If you are a programmer, you understand 90% of the article and the 10% are clarified with a coffee at critec with our developers. If you are from another area and just curious, you know what you have to do: arrange a meeting with us, and our developers do the rest.

want read more?
download the complete article.

Léo Ferreira

2019-09-11

Critec Logo
creative
agency
critec
Hello,
How can i help you?