How to use npm & yarn

npm-vs-yarn

A package manager is a tool tasked with automating processes related to working with packages. Software packages are contained in archive files, and each package contains meta-data describing the software (such as software name, version, and list of all dependencies).

The most common application of a package manager is when installing packages and their dependencies. The package manager eliminates the need to install the software manually. In addition, the package manager can handle updating, configuring, and ultimately removing all those components.

The largest package manager is npm, which was primarily created for the node.js (server) environment, so in order to work in the browser, you need to use the bundler modules (browserify or webpack) in addition to it. Yarn package manager is “new kid is in town”, facebook’s baby, can use all npm packages and has a very similar syntax but is considered to execute commands faster than npm.

Organization of addiction

npm uses a nested dependency tree. Nested dependency tree implies that its dependencies are installed for each package so that the same dependencies (eg, query) can be loaded multiple times but for different programs. This type of organization requires more space but allows applications to use different versions of the same software in one project.

It should be noted that the latest version of npm (npm3) is trying to prevent “dependencies hell” and its style is more like a “flat way”. See more about the dependencies tree at npm3 on their site.

Example

project root
[node_modules] // root directory for dependencies
   -> dependency A
   -> dependency B
      [node_modules] // application B dependencies directory
      -> dependency A
   -> dependency C
      [Node_modules]
      -> dependency B
         [Node_modules]
         -> dependency A
      -> dependency D

Installation and initialization

Installation of package manager

npm

The installation of the npm package manager is part of the node.js installation. Therefore, we first need node.js from the official site where we select the appropriate version of Windows Installer (.msi) and then do the standard installation.

yarn

Since Yarn is used mainly for npm packages, we need to have node.js installed before the Yarn installation itself. Yarn installation is standard, you need to download the installation .msi file from the official site. You can download the download link here, followed by the standard installation with next… next… next

Update the package manager

npm

Updating “npm” with the command:

npm install -global npm 

yarn

The yarn update is done from npm

npm upgrade --global yarn

Initialization of package managers in the project

When we have an application installed on our operating system then we can use it in our project. When initializing the package manager, a “package.json” file is generated with the command:

npm

npm init

yarn

yarn init

Working with packages

Installation of new packages

a) Global installation (operating system)

npm

npm install -global Packagename

yarn

yarn global Packagename

REMARK:
Unlike npm where the “-global” flag is used, yarn uses the command!
The global command is written NOW after the yarn !!!

b) Local installation (in a project)

Installation of the package is done with the command:

npm

npm install Packagename[flag]

Installation options:

  • –save Adding packages to Dependencies -S
  • –save-dev Add packages to devDependencies -D
  • @ 1.2.3 A plugin affixed to the package name that defines the exact version of the package we want to install (if the latest version is omitted)

yarn

yarn add Packagename

Installation options:

  • –dev Adding packages to devDependencies –D
  • @ 1.2.3 A plugin affixed to the package name that defines the exact version of the package we want to install (if the latest version is omitted)

Installation of all packages from package.json

When cloning a project, it does not come with packages installed, but only with instructions on what to install (package.json). Installation of all dependencies defined in the package.json file is done with:

npm

npm install
or
npm i

yarn

yarn install
or 
yarn

Update dependencies

Updating individual packages

npm

With the command to update the installed package, we need to use the appropriate flag used during the installation:

npm update Packagename [optional flag]

yarn

yarn upgrade Packagename
yarn upgrade Packagename @ [version]
yarn upgrade Packagename @ [tag]

Reinstall all packages

npm

rm -rf node_modules && npm install

yarn

yarn upgrade

Removing dependencies

npm

With the command to remove the installed package, we need to use the appropriate flag that was used during the installation:

npm uninstall Packagename [optional flag eg --save-dev]

yarn

yarn remove Packagename

Launching the package

The corresponding package is started with the command:

npm

npm run Packagename

yarn

yarn run Packagename

Tips & tricks

Using Git repository instead of npm Modules

If we do not want to use an official site but some private repository, we can use the following code in package.json:

{
   "dependencies": {
       "angular-ui-codemirror": "git+ssh://git@github.com:jpetitcolas/ui-codemirror.git#di"
   }
}

Deleting non-declared modules

If we sometimes forget to use –save or –save-dev when installing packages, use the “prune” command to delete such packages:

npm prune

or in production you need to add – production:

npm prune --production

This command deletes all packages that are not in the package.json file.

Defining Package Version

With adequate signs we can more precisely define the version of the package:

  • (^) targets all major versions eg (1. *. *)
  • (~) targets the latest minor version, eg (1.2. *)
  • Exact version eg (1.2.3)

Fixing package version

If we want to “permanently” fix the version during installation, it is enough to use:

npm install --save --save-exact Packagename

View outdated version

npm outdated

This command lists the version status for each package:

Package                 Current  Wanted  Latest  Location
babel-cli                6.14.0  6.16.0  6.18.0  admin-on-rest
babel-core              MISSING  6.17.0  6.18.2  admin-on-rest
babel-eslint              6.1.2   7.0.0   7.1.0  admin-on-rest
babel-preset-es2015      6.14.0  6.16.0  6.18.0  admin-on-rest
Likes:
15 0
Views:
1952
Article Categories:
PROGRAMMINGTECHNOLOGY

Leave a Reply

Your email address will not be published. Required fields are marked *