Utilizing npm question for higher dependency administration

Accessible on the npm CLI as of v8.16.0, question is a brand new sub-command that exposes a robust new option to examine and perceive the dependencies of your Node.js mission. With it comes a robust new question syntax, primarily based on a well-known paradigm: CSS. That’s proper, now you can use particular CSS selectors with npm question to higher perceive your mission’s dependency tree.

On this article, we’ll talk about why it’s necessary to examine dependencies, evaluation npm question examples, dive into the syntax for this new command, and discover other ways to format and manipulate its output.

Bounce forward:

Why examine dependencies?

Initially, why is any of this handy? Listed below are a few of the causes of us are eager to have a transparent image of their dependencies:

• Safety audits: Staying on high of safety vulnerabilities (and subsequent patches) is essential to delivery high-quality trendy software program. Good tooling round dependency inspection makes fixing these points simpler and quicker
• Stability: When bugs in a mission’s dependencies trigger issues, it’s essential to have the ability to rapidly establish the affected variations and roll out fixes
• Bundle measurement: Highly effective dependency inspection tooling can help software program groups of their efforts to ship smaller bundles to finish customers and enhance efficiency
• Readability: Having a greater grasp of which software program packages are put in and their supposed goal helps engineers make higher choices and write higher code

Fundamental examples

Earlier than diving into the nitty-gritty of the command arguments and CSS-based syntax, listed below are some primary examples to reveal the facility and precision this new npm question command supplies.

License audit

Suppose you’re writing closed-source, for-profit software program and want to make sure that none of your dependencies are launched underneath the GPL license (which requires downstream customers to additionally launch their software program underneath the GPL or suitable license). To floor doubtlessly problematic packages, you possibly can use the next question command:

npm question "[license=GPL]"

N.B., this isn’t supposed as authorized recommendation; you need to seek the advice of an lawyer in case you have particular questions on software program licenses

Submit-install script inspection

Some packages run scripts after set up, and you could need to examine these scripts to make sure that they aren’t doing something nefarious. With npm question, you’ll be able to simply discover any dependencies that register a postinstall script:

npm question ":attr(scripts, [postinstall])"

See the MDN docs for a refresher on how the CSS :attr() perform works.

Syntax

The first means of choosing particular dependencies is analogous to the CSS ID selector. This command will checklist all copies of lodash put in:

npm question "#lodash"

And if you wish to confirm {that a} explicit model, say 4.17.21, is put in, simply modify the command like so:

npm question "#[email protected]"

npm question additionally helps semver ranges, so long as you employ the extra verbose model of the above command (which makes use of a identify attribute selector and the semver pseudo-selector):

npm question "[name=lodash]:semver(^4)"

Already, we start to see the flexibleness this CSS-based syntax supplies. With only a couple extra core ideas (outlined beneath), you’ll have the ability to convey your prior CSS expertise to assemble queries that reply extremely particular questions concerning the dependency tree.

Dependency teams

Dependency teams (prod dependencies vs. dev dependencies, for instance) are expressed with the acquainted CSS class syntax. So right here’s learn how to question for all dev dependencies:

npm question ".dev"

This question returns all transitive dependencies within the dev group as effectively. However, suppose you’d prefer to restrict the checklist to simply the direct dev dependencies of your mission.

You may make the most of the :root pseudo-selector, which represents your mission, and the CSS youngster combinator, >, to restrict the scope of the question:

npm question ":root > .dev"

Particular pseudo-selectors

Along with the usual CSS pseudo-selectors (equivalent to :not(), :has(), :empty, and so on.), npm question provides just a few particular pseudo-selectors which are particular to querying a dependency tree:

• :personal – Selects dependencies marked as personal of their bundle.json information ("personal": true)
• :deduped – Selects deduped dependencies
• :overridden – Selects dependencies which have been overridden
• :extraneous – Selects dependencies that could be left over from earlier states as they now not are relied on by any bundle within the dependency tree
• :lacking – Selects dependencies which are requested by different packages however aren’t discovered on disk
• :semver(<spec>) – Selects dependencies matching the required semantic model spec
• :path(<path>) – Selects dependencies matching the required path
• :kind(<kind>) – Selects dependencies of the given kind, equivalent to git (for a git repo), listing (for an area listing), and so on.; see this complete checklist of attainable sorts

Acquainted CSS paradigms

With the particular pseudo-selectors listed above, the total energy of CSS may be leveraged to unlock some actually highly effective queries deep into the dependency tree. Right here’s a refresher on some notably useful CSS ideas:

• Combinators: The > combinator we used beforehand selects dependencies matching the selector on the appropriate so long as they’re direct descendants (youngsters) of the selector on the left. The combinator is analogous however operates on all descendants (youngsters, grandchildren, and past). The ~ combinator permits for choosing siblings
• Attribute selectors: Attribute selectors, like [key=value], choose dependencies which have an attribute known as key that’s set to worth. This solely works for string values in bundle.json; for extra highly effective attribute choice, use the :attr() CSS perform
• Superior selectors: * is a particular selector that, simply as in CSS, selects all dependencies. A number of sequences of selectors may be joined collectively utilizing the , selector, which produces the union of outcomes from the selectors on both aspect

Formatting and manipulating the output

By default, npm question outputs giant swaths of JSON, formatted with newlines and an indentation stage of two areas. That is excellent for sending the info to a JSON file to be used by different packages, however it’s not nice for individuals who’d prefer to learn the output within the console.

Utilization within the terminal with jq

jq is a well-liked and quick JSON processor that’s usually used instantly within the command line. There are many nice tutorials and examples on-line for learn how to use jq, together with the official jq handbook, however here’s a fast instance to reveal its energy.

Let’s reuse our question from earlier within the article for choosing all dependencies that make use of a postinstall script (npm question ":attr(scripts, [postinstall])"), this time displaying solely their identify, model, and path on disk:

npm question ":attr(scripts, [postinstall])" | jq '.[] | "(.identify)@(.model) - (.path)"'

Right here’s some pattern output:

"[email protected] - /workspaces/proutils.dev/node_modules/esbuild"
"[email protected] - /workspaces/proutils.dev/node_modules/svelte-preprocess"

Programmatic utilization

For even better management, in addition to the power to run superior processing and evaluation on the outcomes, npm has launched a bundle known as Arborist to be used inside a Node.js program. It contains a promise-based API and helps the identical CSS selectors because the CLI model. For extra particulars on Arborist, check out the official docs.

The best way to enhance dependency administration with npm question

On this article, we’ve taken a fast have a look at the highly effective new npm question CLI command. With a rigorously crafted question, you’ll be able to extra simply obtain deep insights into the dependency tree.

There are plenty of use instances, together with an important checklist within the npm question documentation. To get your psychological wheels turning on the probabilities, listed below are only a few extra use instances phrased as questions that growth groups might need about their dependency stack. Additionally supplied are the queries that may assist reply these questions:

• Do I must run npm set up as a result of I’m lacking some dependencies my teammates added?
• Are there any packages that rely upon each lodash and underscore?
  • npm question "*:has(> #lodash ~ #underscore)"
• Which packages are leaf nodes within the dependency tree?
  • npm question "*:not(*:has(> *))"

What different helpful queries are you able to provide you with?