app • NodeJS npm - martindubenet/wed-dev-design GitHub Wiki

NodeJS

NodeJS includs NPM but these are two different applications. NPM is known to be the best package management system for javascript but it is not the only option for doing so. Yarn, Webpack are the latest trends.

Check your version

node -v
npm -v

Download and install

You can also rely on « nvm » (Node Version Manager) to switch to different versions of node (and npm) for specific repositories on your workstation.

Start fresh

  1. Clear NPM cache
    npm cache clean --force
  2. Delete contents
    rm -rf node_modules package-lock.json
  3. Re-install
    npm install

Multiple Node Version (NVM)

NVM allows you to quickly install and use different versions of node via the command line. Use command line « nvm ls-remote » to list all the versions of NodeJs available to install.

nvm install 18
nvm use 18
  ## Now using node v18.19.0 (npm v10.2.3)
nvm use 14
  ## Now using node v14.18.0 (npm v6.14.15)
nvm use 18
  ## Now using node v18.19.0 (npm v10.2.3)
  ## You can confirm by looking for the node and/or npm version
node -v
npm -v

Type nvm --help to see all the options

 

npm (Node Package Management)

  • To update to latest npm version : npm install npm@latest -g
  • To launch NPM in a project : npm init

« Best package management system for javascript », « Open-source » and « Great community » are the key factors why developers consider npm;
Whereas « Most powerful bundler », « Built-in dev server with livereload » and « Can handle all types of assets » are the primary reasons why Webpack is favored.

  1. NPM keeps track of all the packages and their versions and allows the developer to easily update or remove these dependencies.
  2. Yarn is a superset of NPM that solves many problems the later has.
  3. NPM vs Webpack

 

Start a project

This example is for a new Wordpress Theme

  1. cd /wp-content/theme/{MY_THEME}
  2. npm init -y
  3. npm install {-g} {PACKAGE_NAME}
  4. npm install

Note: At the 2nd command line above, the «-y» stands for «answer yes to all questions»

 

Maintenance of your dependencies

List which package depend on a specific package

npm ls {PACKAGE_NAME}

Get an overview of your packages

npm audit

Getting an ERROR !?

If you get an error message about Access Rights (on macOS probebly) copy/paste the following line. You can read more here : « How to fix the "Missing write access" error when using npm ».

sudo chown -R $USER /usr/local/lib/node_modules

« You must install peer dependencies yourself »

If you get the following message from npm it simply means that you are missing {whatever} in your « package.json➥devDependencies ». To fix this simply use the following command line syntaxe.

« npm WARN {this} requires a peer of {whatever} but none is installed. You must install peer dependencies yourself. »

npm install --save-dev "{whatever}"

 

npm files and parameters

Package files

Both files are automatically generated but at different moment.

file generated by edit description
package.json
npm init manually

The main file for npm to install npm_modules and execute npm scripts.

Commands like npm install and the dependency sections in the package.json use a package name specifier. This can be many different things that all refer to a «package». Examples include a package name, git url, tarball, or local directory. These will generally be referred to as «package-spec» in the help output for the npm commands that use this package name specifier.

package-lock.json
npm install auto-generated

NPM generates this child file based on what is configure in the parent package.json file.

NPM highly recommend to commit the generated package lock to (git) source control, so do NOT list this file in .gitignore.

Note:
If a package-lock.json file already exist in the project the npm install command will read this file instead of the original package.jon. So make sure to delete both node_mudules/ repository AND package-lock file if you are shaking the tree to clean-up your project from deprecated dependencies.

Parameters

By default a package is saved as a core dependency for the solution. Therefor it is expected as required on the server either for build scripts or simply for the solution to run on the servers.

If you don't need the package on the remote server for any reason; Example maybe your Sass files are compiled locally so only CSS are required on server. Then it is a good practice to set that package as a « save for development only » by adding the following --save-dev instruction at the end of the install command line of a package.

Normal Shorthand Definition
install i Self explanatory
--global -g Global installation for all users of your workstation. May required sudo as prefix.
--no-save Prevents saving to dependencies.
--save List the package within dependencies. Project’s packages required by your application in production server.
--save-dev -D List the package within devDependencies. This package is required for developers work stations ONLY. It is not required to run the solution on the server so no need to push on the servers.`
--save-exact -E Saved dependencies will be configured with an exact version rather than using npm's default semver range operator.
--save-prod -P Installs the package in the root directory.

Rules for modules

For versioning node_modules listed in package.json

Rule Definition
^ It will only do updates that do not change the leftmost non-zero number i.e there can be changes in minor version or patch version but not in major version. If you write ^13.1.0, when running npm update, it can update to 13.2.0, 13.3.0 even 13.3.1, 13.3.2 and so on, but not to 14.0.0 or above.
~ If you write ~0.13.0 when running npm update it can update to patch releases: 0.13.1 is ok, but 0.14.0 is not.
> You accept any version higher than the one you specify.
>= You accept any version equal to or higher than the one you specify.
<= You accept any version equal or lower to the one you specify.
< You accept any version lower than the one you specify.
= You accept that exact version.
- You accept a range of versions. Example: 2.1.0 - 2.6.2.
|| You combine sets. Example: < 2.1 || > 2.6.

 

Common npm packages

 

Netlify builds

 

 

⚠️ **GitHub.com Fallback** ⚠️