573 lines
35 KiB
HTML
573 lines
35 KiB
HTML
<h1 id="awesome-npm-awesome">Awesome npm <a
|
||
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||
alt="Awesome" /></a> <a
|
||
href="https://www.npmjs.com"><img src="https://github.com/npm/logos/blob/7fb0bc425e0dac1bab065217c4ed595594448db4/npm-transparent.png" width="200" align="right" alt="npm"></a></h1>
|
||
<blockquote>
|
||
<p>Awesome <a href="https://www.npmjs.com">npm</a> resources and
|
||
tips</p>
|
||
</blockquote>
|
||
<p><a href="https://en.wikipedia.org/wiki/Npm_(software)">npm</a> is a
|
||
package manager for the JavaScript programming language and comes
|
||
bundled in the <a
|
||
href="https://en.wikipedia.org/wiki/Node.js">Node.js</a> runtime.</p>
|
||
<p><em>Please read the <a href="contributing.md">contribution
|
||
guidelines</a> before contributing.</em></p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#tools">Tools</a></li>
|
||
<li><a href="#packages">Packages</a></li>
|
||
<li><a href="#clients">Clients</a></li>
|
||
<li><a href="#tips">Tips</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#documentation">Documentation</a></li>
|
||
<li><a href="#support">Support</a></li>
|
||
<li><a href="#related">Related</a></li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/ama/issues/10#issuecomment-117766328">Small
|
||
focused modules</a></li>
|
||
<li><a
|
||
href="http://blog.izs.me/post/48281998870/unix-philosophy-and-nodejs">Unix
|
||
philosophy and Node.js</a> - Write programs that do one thing and do it
|
||
well.</li>
|
||
<li><a
|
||
href="https://web.archive.org/web/20180302125059/https://substack.net/how_I_write_modules">Writing
|
||
small modules</a></li>
|
||
<li><a href="https://nodesource.com/blog/semver-a-primer/">Semver: A
|
||
Primer</a> <em>(Must read!)</em></li>
|
||
<li><a
|
||
href="https://nodesource.com/blog/semver-tilde-and-caret/">Semver: Tilde
|
||
and Caret</a></li>
|
||
<li><a href="https://addyosmani.com/blog/using-npm-offline/">Offline
|
||
installation of npm packages</a></li>
|
||
<li><a
|
||
href="https://web.archive.org/web/20180302164842/http://substack.net/task_automation_with_npm_run">Task
|
||
automation with npm run</a></li>
|
||
<li><a
|
||
href="https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/">How
|
||
to use npm as a build tool</a></li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/guides/blob/main/npm-global-without-sudo.md">Install
|
||
npm packages globally without sudo on macOS and Linux</a></li>
|
||
<li><a
|
||
href="https://medium.com/@goldglovecb/npm-needs-a-personal-trainer-537e0f8859c6">Optimizing
|
||
the footprint of an npm package</a></li>
|
||
<li><a href="https://github.com/maxogden/art-of-node#modules">The Art of
|
||
Node</a> - An introduction to Node.js and client-side development with
|
||
npm.</li>
|
||
<li><a href="https://css-tricks.com/why-npm-scripts/">Why npm
|
||
scripts?</a> - An introduction to npm scripts with common packages and
|
||
scripts, as well as a boilerplate project.</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<h3 id="web">Web</h3>
|
||
<ul>
|
||
<li><a href="https://npms.io">npms</a> - Superb package search with deep
|
||
analysis of package quality using a <a
|
||
href="https://npms.io/about">myriad of metrics</a>.</li>
|
||
<li><a href="https://nodei.co/">NodeICO</a> - Package badges.</li>
|
||
<li><a href="https://libraries.io/npm">Libraries.io</a> - Package
|
||
discovery.</li>
|
||
<li><a href="http://npm-stat.com">npm-stat</a> - Statistics charts for
|
||
packages.</li>
|
||
<li><a href="http://npm.anvaka.com">npmgraph</a> - Visualization of
|
||
dependencies.</li>
|
||
<li><a href="http://www.npmtrends.com">npm trends</a> - Compare package
|
||
download counts over time.</li>
|
||
<li><a
|
||
href="https://gist.github.com/bcoe/dcc961b869bbf6685002">npm-top</a> -
|
||
npm users by downloads.</li>
|
||
<li><a href="http://semver.npmjs.com">npm semver calculator</a> -
|
||
Visually explore what versions of a package a semver range matches.</li>
|
||
<li><a href="https://ghub.io">ghub.io</a> - Redirects to the GitHub repo
|
||
of an npm package.</li>
|
||
<li><a href="https://moiva.io">moiva</a> - Discover and compare
|
||
packages.</li>
|
||
</ul>
|
||
<h3 id="browser-extensions">Browser extensions</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/octo-linker/jlmafbaeoofdegohdhinkhilhclaklkp">Octo-Linker</a>
|
||
- Chrome extension to navigate across npm packages on GitHub with
|
||
ease.</li>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/npm-hub/kbbbjimdjbjclaebffknlabpogocablj">npm-hub</a>
|
||
- Chrome extension to explore npm dependencies on GitHub repos.</li>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/github-npm-stats/oomfflokggoffaiagenekchfnpighcef">github-npm-stats</a>
|
||
- View npm download stats on GitHub.</li>
|
||
<li><a
|
||
href="https://chrome.google.com/webstore/detail/npm-search-update/kagpoplamlmaonpddimnnigiojimihnh">npm-search-update</a>
|
||
- Chrome extension to quickly search for dependencies and monitor
|
||
changes from the npm registry.</li>
|
||
</ul>
|
||
<h3 id="cli">CLI</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/lukechilds/zsh-better-npm-completion">zsh-better-npm-completion</a>
|
||
- Better ZSH completion for npm.</li>
|
||
<li><a href="https://github.com/voidcosmos/npkill">npkill</a> - Easily
|
||
find and remove old and heavy node_modules folders.</li>
|
||
</ul>
|
||
<h2 id="packages">Packages</h2>
|
||
<h3 id="publishing">Publishing</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/sindresorhus/np">np</a> - A better
|
||
<code>npm publish</code>.</li>
|
||
<li><a
|
||
href="https://github.com/inikulin/publish-please">publish-please</a> -
|
||
Publish packages safely and gracefully.</li>
|
||
<li><a href="https://github.com/phuu/npm-release">npm-release</a> -
|
||
Making releasing to npm so easy a kitten could probably do it™.</li>
|
||
<li><a href="https://github.com/timoxley/pkgfiles">pkgfiles</a> - List
|
||
all files which would be published in a package.</li>
|
||
<li><a href="https://github.com/webpro/release-it">release-it</a> -
|
||
Automate releases for Git repositories and/or npm packages. Changelog
|
||
generation, GitHub/GitLab releases, etc.</li>
|
||
<li><a
|
||
href="https://github.com/semantic-release/semantic-release">semantic-release</a>
|
||
- Fully automated package publishing.</li>
|
||
</ul>
|
||
<h3 id="registry">Registry</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/sindresorhus/npm-name-cli">npm-name</a>
|
||
- Check whether a package name is available on npm.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/package-json">package-json</a> -
|
||
Get the package.json of a package from the npm registry.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/latest-version-cli">latest-version</a>
|
||
- Get the latest version of an npm package.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/npm-keyword">npm-keyword</a> - Get
|
||
a list of npm packages with a certain keyword.</li>
|
||
<li><a href="https://github.com/sindresorhus/npm-user">npm-user</a> -
|
||
Get user info of an npm user.</li>
|
||
<li><a href="https://github.com/sindresorhus/npm-email">npm-email</a> -
|
||
Get the email of an npm user.</li>
|
||
<li><a
|
||
href="https://github.com/kevva/npm-user-packages-cli">npm-user-packages</a>
|
||
- Get packages by an npm user.</li>
|
||
<li><a href="https://github.com/gillstrom/dpn">dpn</a> - Get the
|
||
dependents of a user’s npm packages.</li>
|
||
<li><a href="https://github.com/hughsk/npm-stats">npm-stats</a> - Get
|
||
data from an npm registry.</li>
|
||
<li><a
|
||
href="https://github.com/postmanlabs/npm-cli-login">npm-cli-login</a> -
|
||
Log in to npm.</li>
|
||
<li><a href="https://github.com/Pana/nrm">nrm</a> - Registry
|
||
manager.</li>
|
||
<li><a href="https://github.com/dickeyxxx/npm-register">npm-register</a>
|
||
- Easy to set up and maintain npm registry and proxy.</li>
|
||
<li><a href="https://github.com/verdaccio/verdaccio">verdaccio</a> -
|
||
Lightweight private npm proxy registry.</li>
|
||
<li><a href="https://cloudsmith.io/l/npm-registry/">cloudsmith</a> - A
|
||
fully managed package management SaaS with support for public and
|
||
private npm registries (and many others).</li>
|
||
</ul>
|
||
<h3 id="other">Other</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/sindresorhus/npm-home">npm-home</a> -
|
||
Open the npm page of a package.</li>
|
||
<li><a href="https://github.com/sindresorhus/gh-home">gh-home</a> - Open
|
||
the GitHub page of a package.</li>
|
||
<li><a href="https://github.com/alanshaw/david">david</a> - Check if
|
||
your package dependencies are out of date.</li>
|
||
<li><a href="https://github.com/dylang/npm-check">npm-check</a> - Check
|
||
for outdated, incorrect, and unused dependencies, as well as interactive
|
||
update.</li>
|
||
<li><a href="https://github.com/th0r/npm-upgrade">npm-upgrade</a> -
|
||
Update outdated npm dependencies interactively.</li>
|
||
<li><a href="https://github.com/uber/npm-shrinkwrap">npm-shrinkwrap</a>
|
||
- A consistent shrinkwrap tool.</li>
|
||
<li><a
|
||
href="https://github.com/felixrieseberg/npm-windows-upgrade">npm-windows-upgrade</a>
|
||
- Upgrade npm on Windows.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/generator-nm">generator-nm</a> -
|
||
Scaffold out an npm package.</li>
|
||
<li><a href="https://github.com/sindresorhus/package-up">package-up</a>
|
||
- Find the closest package.json file.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/read-package-up">read-package-up</a>
|
||
- Read the closest package.json file.</li>
|
||
<li><a
|
||
href="https://github.com/npm/normalize-package-data">normalize-package-data</a>
|
||
- Normalize package metadata.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/package-config">package-config</a>
|
||
- Get namespaced config from the closest package.json.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/npm-run-path">npm-run-path</a> -
|
||
Run locally installed binaries in the terminal by name like with global
|
||
ones.</li>
|
||
<li><a href="https://github.com/nolanlawson/local-npm">local-npm</a> -
|
||
Use npm <a
|
||
href="https://addyosmani.com/blog/using-npm-offline/">offline</a>.</li>
|
||
<li><a href="https://github.com/zeke/npe">npe</a> - CLI for inspecting
|
||
and editing properties in package.json.</li>
|
||
<li><a href="https://github.com/samccone/engine-deps">engine-deps</a> -
|
||
Manage Node.js version specific dependencies with ease.</li>
|
||
<li><a href="https://github.com/amovah/enpeem-search">enpeem-search</a>
|
||
- Search packages by scraping the npm web search.</li>
|
||
<li><a href="https://github.com/seanzarrin/npm-issues">npm-issues</a> -
|
||
Search known issues of all your packages at once.</li>
|
||
<li><a href="https://github.com/davej/john">john</a> - Make npm3’s flat
|
||
dependencies easier to find and sort.</li>
|
||
<li><a href="https://github.com/ruyadorno/ntl">ntl</a> - Interactive CLI
|
||
menu to list & run npm tasks.</li>
|
||
<li><a href="https://github.com/egoist/decheck">decheck</a> - Explore
|
||
dependencies of npm packages in the command-line.</li>
|
||
<li><a href="https://github.com/JamieMason/shrinkpack">shrinkpack</a> -
|
||
Lock down your dependencies and install offline.</li>
|
||
<li><a href="https://github.com/coderaiser/redrun">redrun</a> - Expand
|
||
scripts from package.json to improve execution speed.</li>
|
||
<li><a href="https://github.com/egoist/package-size">package-size</a> -
|
||
Get the bundle size of an npm package.</li>
|
||
<li><a href="https://github.com/imsnif/synp">synp</a> - Convert
|
||
yarn.lock to package-lock.json and vice versa.</li>
|
||
<li><a href="https://github.com/mysticatea/npm-run-all">npm-run-all</a>
|
||
- CLI tool to run multiple npm-scripts in parallel or serial.</li>
|
||
<li><a href="https://github.com/Qard/onchange">onchange</a> - Watch
|
||
files and folders and run a command when something changed.</li>
|
||
<li><a
|
||
href="https://github.com/micromata/cli-error-notifier">cli-error-notifier</a>
|
||
- Sends native desktop notifications when npm scripts fail.</li>
|
||
<li><a href="https://github.com/rvpanoz/luna">luna</a> - App to manage
|
||
npm dependencies.</li>
|
||
<li><a href="https://github.com/maticzav/emma-cli">emma-cli</a> -
|
||
Interactive CLI package search utility.</li>
|
||
<li><a
|
||
href="https://github.com/lirantal/lockfile-lint">lockfile-lint</a> -
|
||
Lint lockfiles for improved security and trust policies to mitigate
|
||
malicious package injection and insecure lockfile resources.</li>
|
||
</ul>
|
||
<h2 id="clients">Clients</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/yarnpkg/yarn">yarn</a> - Fast, reliable,
|
||
and secure dependency management.</li>
|
||
<li><a href="https://github.com/npm/cli">npm</a> - The official
|
||
client.</li>
|
||
<li><a href="https://github.com/pnpm/pnpm">pnpm</a> - Fast, disk space
|
||
efficient package manager.</li>
|
||
</ul>
|
||
<h2 id="tips">Tips</h2>
|
||
<h3 id="update-to-the-latest-npm-version">Update to the latest npm
|
||
version</h3>
|
||
<pre><code>$ npm install --global npm</code></pre>
|
||
<p><em><a
|
||
href="https://github.com/felixrieseberg/npm-windows-upgrade">Windows
|
||
users, read more.</a></em></p>
|
||
<h3 id="command-aliases">Command aliases</h3>
|
||
<ul>
|
||
<li><code>npm i</code> → <code>npm install</code></li>
|
||
<li><code>npm i -D</code> → <code>npm install --save-dev</code></li>
|
||
<li><code>npm t</code> → <code>npm test</code></li>
|
||
<li><code>npm it</code> →
|
||
<code>npm install && npm test</code></li>
|
||
<li><code>npm r</code> → <code>npm uninstall</code></li>
|
||
<li><code>npm un</code> → <code>npm uninstall</code></li>
|
||
<li><code>npm up</code> → <code>npm update</code></li>
|
||
</ul>
|
||
<h3 id="shell-aliases">Shell aliases</h3>
|
||
<p>Speed up your common npm tasks.</p>
|
||
<p>In your <code>.zshrc</code>/<code>.bashrc</code>:</p>
|
||
<div class="sourceCode" id="cb2"><pre class="sourceCode sh"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> ni=<span class="st">'npm install'</span></span>
|
||
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nid=<span class="st">'npm install --save-dev'</span></span>
|
||
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nig=<span class="st">'npm install --global'</span></span>
|
||
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nt=<span class="st">'npm test'</span></span>
|
||
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nit=<span class="st">'npm install && npm test'</span></span>
|
||
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nk=<span class="st">'npm link'</span></span>
|
||
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nr=<span class="st">'npm run'</span></span>
|
||
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> ns=<span class="st">'npm start'</span></span>
|
||
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nf=<span class="st">'npm cache clean && rm -rf node_modules && npm install'</span></span>
|
||
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a><span class="bu">alias</span> nlg=<span class="st">'npm list --global --depth=0'</span></span></code></pre></div>
|
||
<h3 id="dont-add-to-package.json-when-installing">Don’t add to
|
||
package.json when installing</h3>
|
||
<p>By default npm adds packages you install to the
|
||
<code>dependencies</code> field in package.json (since v5). You can
|
||
prevent this by specifying the <code>--no-save</code> flag. You can add
|
||
a package to <code>devDependencies</code> with
|
||
<code>--save-dev</code>/<code>-D</code>:</p>
|
||
<pre><code>$ npm install --save-dev ava</code></pre>
|
||
<h3 id="run-scripts">Run scripts</h3>
|
||
<p>You can easily <a href="https://docs.npmjs.com/cli/run-script">run
|
||
scripts</a> using npm by adding them to the <code>"scripts"</code> field
|
||
in package.json and run them with
|
||
<code>npm run <script-name></code>. Run <code>npm run</code> to
|
||
see available scripts. Binaries of locally install packages are made
|
||
available in the <a
|
||
href="https://en.wikipedia.org/wiki/PATH_(variable)">PATH</a>, so you
|
||
can run them by name.</p>
|
||
<div class="sourceCode" id="cb4"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"cat"</span><span class="fu">:</span> <span class="st">"cat-names"</span></span>
|
||
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a> <span class="fu">},</span></span>
|
||
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> <span class="dt">"dependencies"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">"cat-names"</span><span class="fu">:</span> <span class="st">"^1.0.0"</span></span>
|
||
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<pre><code>$ npm run cat
|
||
Max</code></pre>
|
||
<p>All package.json properties are <a
|
||
href="https://docs.npmjs.com/misc/scripts#packagejson-vars">exposed</a>
|
||
as environment variables:</p>
|
||
<div class="sourceCode" id="cb6"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"echo $npm_package_name"</span></span>
|
||
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<pre><code>$ npm run name
|
||
awesome-package</code></pre>
|
||
<h4 id="passing-options-to-commands">Passing options to commands</h4>
|
||
<p>You can pass options to the command you are using in your npm script
|
||
by adding <code>-- --flag</code> like in the example below. The
|
||
<code>--</code> <a
|
||
href="https://unix.stackexchange.com/questions/11376/what-does-double-dash-mean-also-known-as-bare-double-dash">marks
|
||
the end of options parsing</a>, so <code>npm run</code> will just ignore
|
||
it and pass it to the command.</p>
|
||
<div class="sourceCode" id="cb8"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"xo"</span><span class="fu">:</span> <span class="st">"xo"</span><span class="fu">,</span></span>
|
||
<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">"xo:fix"</span><span class="fu">:</span> <span class="st">"npm run xo -- --fix"</span><span class="fu">,</span></span>
|
||
<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<p><em>Adding the <code>-- --fix</code> option is like executing
|
||
<code>xo --fix</code></em>.</p>
|
||
<h4 id="silent-option">Silent option</h4>
|
||
<p><code>npm run</code> has a <code>--silent</code> option which is
|
||
especially useful when combining npm scripts.</p>
|
||
<p>Imagine you have a setup for linting your JavaScript files like the
|
||
following:</p>
|
||
<div class="sourceCode" id="cb9"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"xo"</span><span class="fu">:</span> <span class="st">"xo"</span><span class="fu">,</span></span>
|
||
<span id="cb9-5"><a href="#cb9-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">"xo:fix"</span><span class="fu">:</span> <span class="st">"npm run xo --silent -- --fix"</span><span class="fu">,</span></span>
|
||
<span id="cb9-6"><a href="#cb9-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb9-7"><a href="#cb9-7" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<p><em>Using the <code>--silent</code> option reduces the output in the
|
||
terminal. See <a
|
||
href="https://twitter.com/mkuehnel/status/957965749473210369">this
|
||
comparison</a>.</em></p>
|
||
<h3 id="lifecycle-scripts">Lifecycle scripts</h3>
|
||
<p>npm comes with predefined <a
|
||
href="https://docs.npmjs.com/misc/scripts">lifecyle scripts</a> which
|
||
are excuted under specific conditions if they are defined in your
|
||
package.json.</p>
|
||
<div class="sourceCode" id="cb10"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"prepublishOnly"</span><span class="fu">:</span> <span class="st">"nsp check"</span></span>
|
||
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a> <span class="fu">},</span></span>
|
||
<span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a> <span class="dt">"devDependencies"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb10-7"><a href="#cb10-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">"nsp"</span><span class="fu">:</span> <span class="st">"^3.0.0"</span></span>
|
||
<span id="cb10-8"><a href="#cb10-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb10-9"><a href="#cb10-9" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<p>This will be executed automatically before your npm package is
|
||
published to the registry via <code>npm publish</code> to check for
|
||
known vulnerabilties in your dependencies.</p>
|
||
<p><em>Note: <strong>prepublishOnly</strong> is available since npm
|
||
v4.0.0. See <a
|
||
href="https://docs.npmjs.com/misc/scripts#deprecation-note">npm
|
||
docs</a>.</em></p>
|
||
<h4 id="npm-start-and-npm-test"><code>npm start</code> and
|
||
<code>npm test</code></h4>
|
||
<p><code>npm start</code> and <code>npm test</code> are also lifecycle
|
||
scripts but are not executed automatically.</p>
|
||
<div class="sourceCode" id="cb11"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"start"</span><span class="fu">:</span> <span class="st">"node server.js"</span><span class="fu">,</span></span>
|
||
<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">"test"</span><span class="fu">:</span> <span class="st">"ava"</span></span>
|
||
<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">},</span></span>
|
||
<span id="cb11-7"><a href="#cb11-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">"devDependencies"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb11-8"><a href="#cb11-8" aria-hidden="true" tabindex="-1"></a> <span class="dt">"ava"</span><span class="fu">:</span> <span class="st">"^1.0.0"</span></span>
|
||
<span id="cb11-9"><a href="#cb11-9" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb11-10"><a href="#cb11-10" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<p>Therefore they can be executed simply with:</p>
|
||
<pre class="console"><code>$ npm test
|
||
$ npm start</code></pre>
|
||
<h4 id="pre-and-post-scripts"><code>pre</code> and <code>post</code>
|
||
scripts</h4>
|
||
<p>These are special lifecycle scripts which can be used to run scripts
|
||
automatically in sequence.</p>
|
||
<div class="sourceCode" id="cb13"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"scripts"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"pretest"</span><span class="fu">:</span> <span class="st">"eslint ."</span><span class="fu">,</span></span>
|
||
<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">"test"</span><span class="fu">:</span> <span class="st">"ava"</span></span>
|
||
<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">},</span></span>
|
||
<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">"devDependencies"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb13-8"><a href="#cb13-8" aria-hidden="true" tabindex="-1"></a> <span class="dt">"eslint"</span><span class="fu">:</span> <span class="st">"^4.19.0"</span><span class="fu">,</span></span>
|
||
<span id="cb13-9"><a href="#cb13-9" aria-hidden="true" tabindex="-1"></a> <span class="dt">"ava"</span><span class="fu">:</span> <span class="st">"^1.0.0"</span></span>
|
||
<span id="cb13-10"><a href="#cb13-10" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb13-11"><a href="#cb13-11" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<pre class="console"><code>$ npm test</code></pre>
|
||
<p>This will lint your files before running your tests. The tests will
|
||
not run if linting fails. Or more generally spoken: the following script
|
||
won’t be executed if one of the scripts running in sequence exits with
|
||
an exit code other than 0.</p>
|
||
<p><em>Note: <code>pre</code> and <code>post</code> scripts can also be
|
||
used for your custom npm scripts. So <code>npm run foo</code> will also
|
||
run <code>prefoo</code> and <code>postfoo</code> if defined.</em></p>
|
||
<h3 id="run-script-with-npx">Run script with <code>npx</code></h3>
|
||
<p><code>npm</code> <a
|
||
href="https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b">comes
|
||
bundled</a> with <code>npx</code> (Since v5.2.0) — a tool to execute
|
||
package binaries. Each command is executed either from the local
|
||
<code>node_modules/.bin</code> directory, or from a central cache,
|
||
installing any packages needed in order for <code><command></code>
|
||
to run.</p>
|
||
<div class="sourceCode" id="cb15"><pre
|
||
class="sourceCode json"><code class="sourceCode json"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
|
||
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"name"</span><span class="fu">:</span> <span class="st">"awesome-package"</span><span class="fu">,</span></span>
|
||
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"dependencies"</span><span class="fu">:</span> <span class="fu">{</span></span>
|
||
<span id="cb15-4"><a href="#cb15-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"cat-names"</span><span class="fu">:</span> <span class="st">"^1.0.0"</span></span>
|
||
<span id="cb15-5"><a href="#cb15-5" aria-hidden="true" tabindex="-1"></a> <span class="fu">}</span></span>
|
||
<span id="cb15-6"><a href="#cb15-6" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
|
||
<p>If the binary is already installed, it will be executed from
|
||
<code>node_modules/.bin</code>.</p>
|
||
<pre><code>$ npx cat-names
|
||
Max</code></pre>
|
||
<p>But if the binary is missing, it will be installed first.</p>
|
||
<pre><code>$ npx dog-names
|
||
npx: installed 46 in 3.136s
|
||
Bentley</code></pre>
|
||
<h3 id="run-commands-with-different-node.js-versions">Run commands with
|
||
different Node.js versions</h3>
|
||
<p>With <code>npx</code> (Comes bundled with npm v5.2.0 or newer) and
|
||
the <a
|
||
href="https://www.npmjs.com/package/node-bin"><code>node-bin</code></a>
|
||
package, you can easily try out code in different Node.js versions
|
||
without having to use a version manager like <a
|
||
href="http://nvm.sh"><code>nvm</code></a>, <a
|
||
href="https://github.com/isaacs/nave"><code>nave</code></a>, or <a
|
||
href="https://github.com/tj/n"><code>n</code></a>.</p>
|
||
<pre><code>$ npx --package=node-bin@6.11.0 -- node --version
|
||
v6.11.0</code></pre>
|
||
<h3 id="link-local-packages">Link local packages</h3>
|
||
<p>Sometimes it can be useful to have a local version of a package as a
|
||
dependency. You can use <code>npm link</code> to link one local package
|
||
into another. Run <code>npm link</code> in the package you want to use.
|
||
This creates a global reference. Then go into your original package and
|
||
run <code>npm link <package-name></code> to link in the other
|
||
package.</p>
|
||
<pre><code>$ cd rainbow
|
||
$ npm link
|
||
$ cd ../unicorn
|
||
$ npm link rainbow</code></pre>
|
||
<p>You can now use <code>rainbow</code> as a dependency in the
|
||
<code>unicorn</code> package.</p>
|
||
<h3 id="install-a-package-from-github">Install a package from
|
||
GitHub</h3>
|
||
<p>npm supports using a shorthand for installing a package directly from
|
||
a GitHub repo:</p>
|
||
<pre><code>$ npm install sindresorhus/chalk</code></pre>
|
||
<p>Let’s target a specific commit as the main branch is a moving
|
||
target:</p>
|
||
<pre><code>$ npm install 'sindresorhus/chalk#51b8f32'</code></pre>
|
||
<p>Specify either a commit SHA, branch, tag, or nothing.</p>
|
||
<p>You can also install Git dependencies with semver: <em>(Requires npm
|
||
v5 or newer)</em></p>
|
||
<pre><code>$ npm install 'sindresorhus/chalk#semver:^2.0.0'</code></pre>
|
||
<h3 id="install-a-specific-version-of-a-package">Install a specific
|
||
version of a package</h3>
|
||
<pre><code>$ npm install chalk@1.0.0</code></pre>
|
||
<h3 id="list-top-level-installed-packages-and-their-version">List
|
||
top-level installed packages and their version</h3>
|
||
<pre><code>$ npm ls --depth=0</code></pre>
|
||
<h3 id="command-help">Command help</h3>
|
||
<p>Get help docs for a command:</p>
|
||
<pre><code>$ npm help <command></code></pre>
|
||
<p>Example:</p>
|
||
<pre><code>$ npm help install</code></pre>
|
||
<h3 id="standalone-version-of-a-package">Standalone version of a
|
||
package</h3>
|
||
<p>Quickly get a standalone version of a package that is browserified
|
||
and usable in the browser.</p>
|
||
<pre><code>https://wzrd.in/standalone/<package-name>[@<version>]</code></pre>
|
||
<p>Examples:</p>
|
||
<ul>
|
||
<li><a href="https://wzrd.in/standalone/object-assign"
|
||
class="uri">https://wzrd.in/standalone/object-assign</a></li>
|
||
<li><a href="https://wzrd.in/standalone/object-assign@4.0.0"
|
||
class="uri">https://wzrd.in/standalone/object-assign@4.0.0</a></li>
|
||
</ul>
|
||
<p>Great for prototyping, but download the file or use Browserify
|
||
yourself for production.</p>
|
||
<h2 id="faq">FAQ</h2>
|
||
<ul>
|
||
<li><a
|
||
href="http://stackoverflow.com/questions/11459733/check-in-node-modules-vs-shrinkwrap">Check
|
||
in node_modules vs. shrinkwrap</a></li>
|
||
<li><a
|
||
href="http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm">What
|
||
is the difference between Bower and npm?</a></li>
|
||
<li><a
|
||
href="http://stackoverflow.com/questions/22137778/what-does-mean-in-package-json-versioning">What
|
||
does <code>^</code> mean in package.json versioning?</a></li>
|
||
<li><a
|
||
href="http://stackoverflow.com/questions/10972176/find-the-version-of-an-installed-npm-package">Find
|
||
the version of an installed npm package</a></li>
|
||
<li><a
|
||
href="http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies">What’s
|
||
the difference between dependencies, devDependencies, and
|
||
peerDependencies in package.json?</a></li>
|
||
</ul>
|
||
<h2 id="community">Community</h2>
|
||
<ul>
|
||
<li><a
|
||
href="http://webchat.freenode.net/?channels=npm"><code>#npm</code> on
|
||
Freenode</a></li>
|
||
<li><a href="https://stackoverflow.com/questions/tagged/npm">Stack
|
||
Overflow</a></li>
|
||
<li><a href="https://www.reddit.com/r/npm">Reddit</a></li>
|
||
<li><a href="https://twitter.com/npmjs">Twitter</a></li>
|
||
<li><a href="https://blog.npmjs.org">Blog</a></li>
|
||
</ul>
|
||
<h2 id="documentation">Documentation</h2>
|
||
<ul>
|
||
<li><a href="https://docs.npmjs.com">Official</a></li>
|
||
<li><a
|
||
href="https://github.com/npm/npm/wiki/Troubleshooting">Troubleshooting</a></li>
|
||
<li><a
|
||
href="https://docs.npmjs.com/getting-started/semantic-versioning">Semantic
|
||
versioning</a></li>
|
||
<li><a
|
||
href="https://docs.npmjs.com/getting-started/fixing-npm-permissions">Fixing
|
||
npm permissions</a></li>
|
||
<li><a
|
||
href="https://docs.npmjs.com/files/package.json">package.json</a></li>
|
||
<li><a href="https://docs.npmjs.com/cli/run-script">npm run
|
||
script</a></li>
|
||
<li><a href="https://github.com/npm/download-counts">Stats API</a></li>
|
||
</ul>
|
||
<h2 id="support">Support</h2>
|
||
<ul>
|
||
<li><a href="https://npm.community/c/support">npm.community</a></li>
|
||
<li><a href="https://twitter.com/npm_support">Twitter</a></li>
|
||
<li><a href="https://www.npmjs.com/support">Contact form</a></li>
|
||
</ul>
|
||
<h2 id="related">Related</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/awesome-nodejs">awesome-nodejs</a></li>
|
||
</ul>
|
||
<p><a href="https://github.com/sindresorhus/awesome-npm">npm.md
|
||
Github</a></p>
|