blocks|key|69124|text|该站点允许您以2D或3D节点图的形式查看包树。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69125|http://npm.anvaka.com/#/view/2d/waterline|offset|length|69126|​|69127|📷|atomic|69128|69129|来自@Avanka的伟大工作！|69130|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6725dea04c856dd4abcb846e1bf4fd60.png|imageAlt^0|0|0|15|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|K|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1B|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|C]]|U|$5|V|R|W|A|$X|Y|Z|-4]]]]

This site allows you to view a packages tree as a node graph in 2D or 3D. 

<a href="http://npm.anvaka.com/#/view/2d/waterline" rel="noreferrer">http://npm.anvaka.com/#/view/2d/waterline</a>

<a href="https://i.stack.imgur.com/i40GJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/i40GJ.png" alt="enter image description here"></a>

Great work from @Avanka!

blocks|key|69185|text|您可以使用以下命令生成NPM依赖关系树，而无需安装依赖关系|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69186|npm+list|code-block|syntax|javascript|69187|这将在当前目录下为项目生成依赖关系树，并将其打印到控制台。|69188|您可以获取特定依赖的依赖树，如下所示：|69189|npm+list+[dependency]|69190|您还可以通过执行以下操作来设置最大深度级别|69191|npm+list+--depth=[depth]|69192|请注意，您只能查看已全局安装或本地安装到NPM项目的依赖项的依赖项树。|69193|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

You can generate NPM dependency trees without the need of installing 
a dependency by using the command

<pre><code>npm list
</code></pre>

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:

<pre><code>npm list [dependency]
</code></pre>

You can also set the maximum depth level by doing

<pre><code>npm list --depth=[depth]
</code></pre>

Note that you can only view the dependency tree of a dependency that you have installed either globally, or locally to the NPM project.

blocks|key|69220|text|如果你想获得特定包的实际依赖路径，并想知道为什么会有它，你可以简单地问yarn+why+<MODULE>。示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|69221|++++$>+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.|code-block|syntax|javascript|69222|entityMap^0|Z|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you want to get the actually dependency path of specific package and want to know why you have it, you can simply ask <code>yarn why &lt;MODULE&gt;</code>.
example:

<pre class="lang-sh prettyprint-override"><code> $&gt; 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...
 =&gt; 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.

</code></pre>

blocks|key|4575668|text|不幸的是，npm仍然没有办法查看未安装包的依赖关系。即使是package's+page也不能正确列出依赖项。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4575669|幸运地安装了yarn|4575670|brew+install+yarn|style|CODE|4575671|允许用户使用其info命令查看准确的依赖关系：|4575672|yarn+info+@angular/router@4.4.7+dependencies|4575673|yarn+info+@angular/router@4.4.7+peerDependencies|4575674|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/@angular/core?activeTab=dependencies|1|https://yarnpkg.com/en/^0|T|E|0|0|6|4|1|0|0|H|0|0|0|18|0|0|1C|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|F|3|G|5|6|7|17|8|@$A|18|B|19|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1B|8|@$A|1C|B|1D|H|I]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1E|8|@$A|1F|B|1G|H|I]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

Unfortunately npm still doesn't have a way to view dependencies of non-installed packages. Not even a <a href="https://www.npmjs.com/package/@angular/core?activeTab=dependencies" rel="nofollow noreferrer">package's page</a> list the dependencies correctly. 

Luckily installing <a href="https://yarnpkg.com/en/" rel="nofollow noreferrer">yarn</a>:

<code>brew install yarn</code>

Allows one to use its info command to view accurate dependencies:

<code>yarn info @angular/router@4.4.7 dependencies</code>

<code>yarn info @angular/router@4.4.7 peerDependencies</code>

blocks|key|69311|text|查看npm模块的所有元数据|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69312|npm+view+mongoose(module+name)|code-block|syntax|javascript|69313|查看模块的所有依赖关系|69314|npm+view+mongoose+dependencies|69315|查看所有版本或版本模块|69316|npm+view+mongoose+version
npm+view+mongoose+versions|69317|查看所有关键字|69318|npm+view+mongoose+keywords|69319|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<h1>View All the metadata about npm module</h1>
<pre><code>npm view mongoose(module name)
</code></pre>
<h1>View All Dependencies of module</h1>
<pre><code>npm view mongoose dependencies
</code></pre>
<h1>View All Version or Versions module</h1>
<pre><code>npm view mongoose version
npm view mongoose versions
</code></pre>
<h1>View All the keywords</h1>
<pre><code>npm view mongoose keywords
</code></pre>

blocks|key|4575946|text|您可以使用howfat，它还会显示依赖项统计信息：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4575947|npx+howfat+-r+tree+jasmine|code-block|syntax|javascript|4575948|​|4575949|📷|atomic|4575950|4575951|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/megahertz/howfat|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1439ea20b6bc47916215ed1ff88fe3af.png|imageAlt^0|5|6|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|N|3|J|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|X|S|Y|C|$Z|10|11|-4]]]]

You can use <a href="https://github.com/megahertz/howfat" rel="noreferrer">howfat</a> which also displays dependency statistics:

<pre class="lang-sh prettyprint-override"><code>npx howfat -r tree jasmine
</code></pre>

<img src="https://github.com/megahertz/howfat/blob/master/docs/screenshot.png?raw=true" alt="screensot">

blocks|key|69553|text|还有一个很好的web应用程序，可以在加权地图类型的视图中查看依赖关系。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69554|例如：|69555|https://bundlephobia.com/result?p=sanitize-html@1.19.1|offset|length|69556|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1I|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

There is also a nice web app to see the dependencies in a weighted map kind of view.

For example:

<a href="https://bundlephobia.com/result?p=sanitize-html@1.19.1" rel="nofollow noreferrer">https://bundlephobia.com/result?p=sanitize-html@1.19.1</a>

blocks|key|69595|text|要将其作为列表获取，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|69596|%25+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'
]|code-block|syntax|javascript|69597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To get it as a list:
<pre class="lang-sh prettyprint-override"><code>% 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'
]
</code></pre>

blocks|key|4576052|text|如果您使用的是yarn，那么您可以使用项目根目录下的yarn+list。它将为您提供所有传递依赖的树状结构，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4576053|├─+@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@%5E2.6.0
│++├─+@ampproject/toolbox-runtime-version@%5E2.7.0-alpha.1
│++├─+@ampproject/toolbox-script-csp@%5E2.5.4
│++├─+@ampproject/toolbox-validator-rules@%5E2.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@%5E1.0.30001093
│++│++├─+postcss@%5E7.0.32
│++│++└─+postcss@7.0.35
│++│+++++├─+chalk@%5E2.4.2
│++│+++++├─+source-map@%5E0.6.1
│++│+++++└─+supports-color@%5E6.1.0|code-block|syntax|javascript|4576054|entityMap^0|Q|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you are using yarn, then you can go with <code>yarn list</code> from the root directory of the project. It'll give you a tree like structure of all the transitive dependencies like below:
<pre><code>├─ @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
</code></pre>

How can I get the tree of a module available to npm, but not installed locally ?

<code>npm ll</code> does the job for locally installed packages. But it doesn't work for modules not installed or modules installed globally.

I tried <code>npm list bower</code> but that's not it.

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

如何获取可用于npm的模块树，但不能在本地安装？npm ll为本地安装的包做这项工作。但它不适用于未安装的模块或全局安装的模块。我试过npm list bower，但不是这样的。

问如何查看给定npm模块的依赖树？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何查看给定npm模块的依赖树？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何查看给定npm模块的依赖树？
EN