How to view the dependency tree of a given npm module? - npm

How can I get the tree of a module available to npm, but not installed locally ?
npm ll does the job for locally installed packages. But it doesn't work for modules not installed or modules installed globally.
I tried npm list bower but that's not it.

You can generate NPM dependency trees without the need of installing
a dependency by using the command
npm list
This will generate a dependency tree for the project at the current directory and print it to the console.
You can get the dependency tree of a specific dependency like so:
npm list [dependency]
You can also set the maximum depth level by doing
npm list --depth=[depth]
Note that you can only view the dependency tree of a dependency that you have installed either globally, or locally to the NPM project.

You can use the npm-remote-ls module. You can install it globally:
npm install -g npm-remote-ls
And then call:
npm-remote-ls bower
Alternatively, npm#5.2.0 installed then you can use npx and avoid globally installing the command - just call:
npx npm-remote-ls bower

This site allows you to view a packages tree as a node graph in 2D or 3D.
http://npm.anvaka.com/#/view/2d/waterline
Great work from #Avanka!

Here is the unpowerful official command:
npm view <PACKAGE> dependencies
It prints only the direct dependencies, not the whole tree.

You can use howfat which also displays dependency statistics:
npx howfat jasmine

If you want to get the actually dependency path of specific package and want to know why you have it, you can simply ask yarn why <MODULE>.
example:
$> yarn why mime-db
yarn why v1.5.1
[1/4] Why do we have the module "mime-db"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "mime-db#1.37.0"
info Reasons this module exists
- "coveralls#request#mime-types" depends on it
- Hoisted from "coveralls#request#mime-types#mime-db"
info Disk size without dependencies: "196kB"
info Disk size with unique dependencies: "196kB"
info Disk size with transitive dependencies: "196kB"
info Number of shared dependencies: 0
Done in 0.65s.

View All the metadata about npm module
npm view mongoose(module name)
View All Dependencies of module
npm view mongoose dependencies
View All Version or Versions module
npm view mongoose version
npm view mongoose versions
View All the keywords
npm view mongoose keywords

This command output all modules with dependencies in a tree structure:
npm ls -a

If you are using yarn, then you can go with yarn list from the root directory of the project. It'll give you a tree like structure of all the transitive dependencies like below:
├─ #ampproject/toolbox-core#2.7.4
│ ├─ cross-fetch#3.0.6
│ └─ lru-cache#6.0.0
├─ #ampproject/toolbox-optimizer#2.7.0-alpha.1
│ ├─ #ampproject/toolbox-core#^2.6.0
│ ├─ #ampproject/toolbox-runtime-version#^2.7.0-alpha.1
│ ├─ #ampproject/toolbox-script-csp#^2.5.4
│ ├─ #ampproject/toolbox-validator-rules#^2.5.4
│ ├─ abort-controller#3.0.0
│ ├─ cross-fetch#3.0.5
│ ├─ cross-fetch#3.0.5
│ │ └─ node-fetch#2.6.0
│ ├─ cssnano-preset-simple#1.2.0
│ │ ├─ caniuse-lite#^1.0.30001093
│ │ ├─ postcss#^7.0.32
│ │ └─ postcss#7.0.35
│ │ ├─ chalk#^2.4.2
│ │ ├─ source-map#^0.6.1
│ │ └─ supports-color#^6.1.0

To get it as a list:
% npx npm-remote-ls --flatten dugite -d false -o false
[
'dugite#1.91.3',
'checksum#0.1.1',
'progress#2.0.3',
'mkdirp#0.5.5',
'rimraf#2.7.1',
'tar#4.4.13',
'optimist#0.3.7',
'got#9.6.0',
'minimist#1.2.5',
'chownr#1.1.4',
'glob#7.1.6',
'fs-minipass#1.2.7',
'minizlib#1.3.3',
'minipass#2.9.0',
'safe-buffer#5.2.1',
'yallist#3.1.1',
'wordwrap#0.0.3',
'#szmarczak/http-timer#1.1.2',
'cacheable-request#6.1.0',
'#sindresorhus/is#0.14.0',
'decompress-response#3.3.0',
'duplexer3#0.1.4',
'lowercase-keys#1.0.1',
'mimic-response#1.0.1',
'get-stream#4.1.0',
'to-readable-stream#1.0.0',
'p-cancelable#1.1.0',
'url-parse-lax#3.0.0',
'fs.realpath#1.0.0',
'inflight#1.0.6',
'inherits#2.0.4',
'once#1.4.0',
'path-is-absolute#1.0.1',
'minimatch#3.0.4',
'defer-to-connect#1.1.3',
'clone-response#1.0.2',
'get-stream#5.2.0',
'http-cache-semantics#4.1.0',
'lowercase-keys#2.0.0',
'responselike#1.0.2',
'keyv#3.1.0',
'pump#3.0.0',
'prepend-http#2.0.0',
'normalize-url#4.5.0',
'wrappy#1.0.2',
'brace-expansion#1.1.11',
'json-buffer#3.0.0',
'end-of-stream#1.4.4',
'concat-map#0.0.1',
'balanced-match#1.0.0'
]

There is also a nice web app to see the dependencies in a weighted map kind of view.
For example:
https://bundlephobia.com/result?p=sanitize-html#1.19.1

Unfortunately npm still doesn't have a way to view dependencies of non-installed packages. Not even a package's page list the dependencies correctly. 🙄
Luckily installing yarn:
brew install yarn
Allows one to use its info command to view accurate dependencies:
yarn info #angular/router#4.4.7 dependencies
yarn info #angular/router#4.4.7 peerDependencies

Related

Indirect Dependencies vs Direct Dependencies

I have a package which has a dependency on cross-spawn and the build is coming out be successful right now. I don't see any issues.
However, cross-spawn is not present in our package.json and is come indirectly from
├─┬ #wdio/cli#7.0.0
│ └─┬ yarn-install#1.0.0
│ └── cross-spawn#4.0.2
└─┬ eslint#8.25.0
└── cross-spawn#7.0.3
Should I get a direct dependency in my package.json? What advantages do I get with that? Will there be any conflicts? I am new to npm world and I would like to understand how a direct dependency vs indirect dependency can cause issues?

How to use npm workspace

I develop my app by using npm workspace.but I am totally novice to this concept so that I would like to understand npm workspace behavior
.
├── package.json
└── packages
├── a
│ └── package.json
├── b
│ └── package.json
└── c
└── package.json
package.json
{
"workspaces": [
"packages/*"
]
}
My question is
①what happens when I run npm install in root directory ?
All the packages are installed in each repository ? or root directory ?
②npm install in each project is not recommended ?
if someone has opinion, will you please let me know.
Thanks
So long as all packages have the same version of dependencies listed (e.g. thing#1.0.0), then npm install run from the root of your repository will add the dependency into the root node_modules directory.
If one of your packages (e.g. packages/c) has a different version of a dependency (e.g. thing#1.0.1) then that would appear in packages/2/node_modules)
In theory you are using npm workspaces to ensure some consistency across packages, therefore ensuring your versions are consistent will mean node_modules is only ever created in the root of your repository

how do I ensure all package.json dependencies go to the same version

I have a problem with path-to-regexp, I want to ensure if possible all dependencies go through 3.0.0.
I have ran
npm i path-to-regexp it adds this to my package.json:
"path-to-regexp": "^3.0.0",
But when I run
npm ls path-to-regexp
I get:
├── path-to-regexp#3.0.0
├─┬ react-router-dom#5.0.0
│ └─┬ react-router#5.0.0
│ └── path-to-regexp#1.7.0
└─┬ react-scripts#3.0.1
└─┬ webpack-dev-server#3.2.1
└─┬ express#4.17.0
└── path-to-regexp#0.1.7
I want react-router-dom use 3.0.0.
Is this possible?
Different modules are released by different teams, on different schedules, with independent version numbers. It makes no sense to force "all dependencies" to the same version.
How to override a specific dependency version, in your case react-router-dom, is explained here:
https://stackoverflow.com/a/17423915/11451509

Npm script to run both child directory folders?

How do I write a script in my Parent Folder's package.json file so that when I run npm install it installs the node modules in each folder and npm start will go to each folder and run npm start
The Frontend and Backend folder both use npm start to start up and I want to somehow do the same in the parent folder to simultaneously start both
This is the file structure:
ParentFolder
├── package.json . <--- npm install && npm start scripts
├── FrontEnd
│ ├── /node_modules
│ ├── package.json
│ └── index.js
├── Backend
│ ├── /node_modules
│ ├── package.json
│ ├── routes.js
│ └── server.js.js
Installing in two directories is easy with find
find ./*/* -maxdepth 1 -name package.json -execdir npm install \;
This looks in each directory for a package.json and executes npm install;
npm start becomes a bit harder. At least on Windows using Cygwin, I wanted to do:
npm --prefix ./FrontEnd start ./FrontEnd & npm --prefix ./Backend start ./Backend
But it wasn't actually running in the background like I expected and FrontEnd was the only one that actually started. Depending on your start script this could work for you.
Possible solutions for this could be concurrently or npm-run-all -p.

Share node_modules installation between sub-projects, while maintaining separate package.json files

I have the following folder structure:
project
├───components
│ ├───component-one
│ │ package.json
│ │
│ └───component-two
│ │ package.json
│ │
│ └───node_modules
├───node_modules
└───package.json
Project root project folder contains package.json and is intended to have various infrastructural modules installed (Gulp, for example, as the build is centralized).
Each component under components folder is eventually, after build and whatnot, is deployed somewhere to be consumed by an application - using the usual npm install from folder or tarball. For that reason, each component must maintain its own dependencies in its own package.json.
Going the trivial route, installing node_modules into each of the component folders would lead to a crazy amount of duplication, as there may be 100s of components, each installing mostly the same dependencies.
Ideally I would like to:
run, for example, npm install -D <module> in component-one folder
have package.json in that folder updated with the <module>
have <module> installed in the project folder
This can be achieved, to some extent, running (on Windows, in this case) mklink /D node_modules ..\..\node_modules from component-one to create a symlink.
However, symlinks are fragile and finicky, so I'd like to avoid that solution.
Is there an npm solution, via npm link or something that I am missing?