Skip to main content

npm

package.json docs: https://docs.npmjs.com/cli/v8/configuring-npm/package-json

Running cross-platform tasks via npm package scripts: https://2ality.com/2022/08/npm-package-scripts.html -> Outdated! New link is https://exploringjs.com/nodejs-shell-scripting/ch_package-scripts.html, so it's a chapter of the book Shell scripting with Node.js

CLI

CLI docs: https://docs.npmjs.com/cli-documentation/

npm <-> yarn:

Tip: npm run lists all the executable commands/scripts.

Upgrade npm itself: npm install npm@latest -g

(If this command fails and we then get zsh: command not found: npm we can fix it with brew reinstall node.)

List all commands: npm. List commands with details: npm -l.

Install to devDependencies: npm install --save-dev webpack or npm i -D webpack

Suppress output like '204 packages are looking for funding' or '8 high severity vulnerabilities': npm i --no-audit --no-fund --no-optional

List all outdated packages: npm outdated

Also see: https://github.com/raineorshine/npm-check-updates - npx npm-check-updates

Uninstall a package: npm uninstall <package>

Show package info: npm info <package>

Open docs (eg README) in the browser: npm docs <package>

To pass arguments to a script you need to add -- (see npm run docs). Eg if we have the script "test": "jest" and we want to run Jest in watch mode, we need to do npm test -- --watch. Note: in this case doing npx jest --watch also works.

npx command runs a binary or package. It can be a local package (eg a binary in ./node_modules/.bin/) or fetched remotely. See https://docs.npmjs.com/cli/v8/commands/npx

npm ci (clean install)

Find outdated and unused packages: https://github.com/dylang/npm-check

https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/

Update a package

Just use npm i [-D] [-E] somepackage@latest (eg npm i -D -E typescript@latest) because using npm update doesn't update package.json:

Note that by default npm update will not update the semver values of direct dependencies in your project package.json, if you want to also update values in package.json you can run: npm update --save (or add the save=true option to a configuration file to make that the default behavior).

Init npm init

https://docs.npmjs.com/cli/v8/commands/npm-init

Creates package.json.

Init without questions: npm init -y

Get rid of 'x packages are looking for funding'

npm config set fund false
# check the value, it should be false now
npm config get fund

https://docs.npmjs.com/cli/v8/commands/npm-install#fund

Global

List global pacakges: npm list -g --depth=0

List outdated global packages: npm outdated -g

Add global package: npm install -g <package>

Update 1 global package: npm update -g <package>

Update all global packages: npm update -g

Remove global package: npm uninstall -g <package>

dependencies vs devDependencies

Putting packages in dependencies or devDependencies matters on Node.js and libraries, but not when creating a bundle (eg with Create React App).

How do I decide whether @types/* goes into dependencies or devDependencies? - https://stackoverflow.com/questions/45176661/how-do-i-decide-whether-types-goes-into-dependencies-or-devdependencies

create-react-app install devDepencies in dependencies section - https://stackoverflow.com/questions/44868453/create-react-app-install-devdepencies-in-dependencies-section

Consider moving react-scripts to devDependencies in the generated package - https://github.com/facebook/create-react-app/issues/4342

I don't think npm's advice is very relevant here. It is primarily concerning Node apps. CRA doesn't give you a Node app. From that perspective, all dependencies (including React) are "dev" dependencies because they're only necessary for the build: once you build the app, it has no deps at all.

Everything goes into dependencies? - https://github.com/facebook/create-react-app/issues/6180

The distinction is meaningful for Node apps because they actually are deployed as runtime. So you might not want to deploy development dependencies.

In case of CRA, the end result is a static bundle. So in a sense all dependencies are "development dependencies", even React or libraries you use. They're used only at the build time.

Dependency version

https://docs.npmjs.com/cli/v8/configuring-npm/package-json#dependencies

semver calculator: https://semver.npmjs.com

MAJOR.MINOR.PATCH

"dependencies": {
"exact": "15.7.2",
"same-major": "^15.7.2", // upgrade to 15.X.Y (eg 15.7.3 and 15.8.0, but not 16.0.0)
"same-major-and-minor": "~15.7.2" // upgrade to 15.7.X
}

There are more operators you can use in addition to ^ and ~, like >=1.2.3, <1.2.3 || >=4.5.6, 1.0.0 - 1.2.0. See https://semver.npmjs.com and https://medium.com/helpshift-engineering/package-lock-json-the-complete-guide-2ae40175ebdd

To save exact do: npm install --save-exact express or npm i -E express

Find parent of transitive dependency

npm ls @typescript-eslint/typescript-estree

This will print who is using @typescript-eslint/typescript-estree:

MyProject
└─┬ @react-native-community/eslint-config@3.0.1
├─┬ @typescript-eslint/eslint-plugin@4.28.1
│ └─┬ @typescript-eslint/experimental-utils@4.28.1
│ └── @typescript-eslint/typescript-estree@4.28.1 deduped
└─┬ @typescript-eslint/parser@4.28.1
└── @typescript-eslint/typescript-estree@4.28.1

Here the transitive dependency @typescript-eslint/typescript-estree is being imported by the direct dependency @react-native-community/eslint-config (which appears in package.json).

Yarn has yarn list.

source