doc: add npx document in npm.md #65 9c3ad5a300

docs/npm.html

@@ -42,7 +42,7 @@
 <p>这个 <a href="https://www.npmjs.com/">npm</a> 快速参考备忘单显示了它的常用命令使用清单</p>
 </div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
   <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
-</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#常用命令">常用命令</a><a aria-hidden="true" class="leve3 tocs-link" href="#包管理">包管理</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#清单">清单</a><a aria-hidden="true" class="leve3 tocs-link" href="#缓存-cache">缓存 cache</a><a aria-hidden="true" class="leve3 tocs-link" href="#更新">更新</a><a aria-hidden="true" class="leve3 tocs-link" href="#杂项功能">杂项功能</a><a aria-hidden="true" class="leve3 tocs-link" href="#取消发布包">取消发布包</a><a aria-hidden="true" class="leve3 tocs-link" href="#更改包裹可见性">更改包裹可见性</a><a aria-hidden="true" class="leve3 tocs-link" href="#要将包转移到-npm-用户帐户">要将包转移到 npm 用户帐户</a><a aria-hidden="true" class="leve3 tocs-link" href="#发布包-npmjsorg">发布包 npmjs.org</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-nrm-切换-registry">使用 nrm 切换 registry</a><a aria-hidden="true" class="leve2 tocs-link" href="#配置">配置</a><a aria-hidden="true" class="leve3 tocs-link" href="#npmrc">.npmrc</a><a aria-hidden="true" class="leve3 tocs-link" href="#配置内容">配置内容</a><a aria-hidden="true" class="leve3 tocs-link" href="#registry">registry</a><a aria-hidden="true" class="leve3 tocs-link" href="#npmignore">.npmignore</a><a aria-hidden="true" class="leve3 tocs-link" href="#中国镜像站安装">中国镜像站安装</a><a aria-hidden="true" class="leve4 tocs-link" href="#electronjs-镜像和缓存">electronjs 镜像和缓存</a><a aria-hidden="true" class="leve3 tocs-link" href="#身份验证相关配置">身份验证相关配置</a><a aria-hidden="true" class="leve2 tocs-link" href="#纯-esm-包">纯 ESM 包</a><a aria-hidden="true" class="leve3 tocs-link" href="#commonjs-项目移动到-esm">CommonJS 项目移动到 ESM</a><a aria-hidden="true" class="leve3 tocs-link" href="#typescript-项目输出-esm">TypeScript 项目输出 ESM</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="常用命令"><a aria-hidden="true" tabindex="-1" href="#常用命令"><span class="icon icon-link"></span></a>常用命令</h2><div class="wrap-body">
+</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#常用命令">常用命令</a><a aria-hidden="true" class="leve3 tocs-link" href="#包管理">包管理</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#清单">清单</a><a aria-hidden="true" class="leve3 tocs-link" href="#缓存-cache">缓存 cache</a><a aria-hidden="true" class="leve3 tocs-link" href="#更新">更新</a><a aria-hidden="true" class="leve3 tocs-link" href="#杂项功能">杂项功能</a><a aria-hidden="true" class="leve3 tocs-link" href="#取消发布包">取消发布包</a><a aria-hidden="true" class="leve3 tocs-link" href="#更改包裹可见性">更改包裹可见性</a><a aria-hidden="true" class="leve3 tocs-link" href="#要将包转移到-npm-用户帐户">要将包转移到 npm 用户帐户</a><a aria-hidden="true" class="leve3 tocs-link" href="#发布包-npmjsorg">发布包 npmjs.org</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-nrm-切换-registry">使用 nrm 切换 registry</a><a aria-hidden="true" class="leve2 tocs-link" href="#npx">npx</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#npx-vs-npm-exec">npx VS npm exec</a><a aria-hidden="true" class="leve3 tocs-link" href="#npx-vs-npm-exec-示例">npx VS npm exec 示例</a><a aria-hidden="true" class="leve2 tocs-link" href="#配置">配置</a><a aria-hidden="true" class="leve3 tocs-link" href="#npmrc">.npmrc</a><a aria-hidden="true" class="leve3 tocs-link" href="#配置内容">配置内容</a><a aria-hidden="true" class="leve3 tocs-link" href="#registry">registry</a><a aria-hidden="true" class="leve3 tocs-link" href="#npmignore">.npmignore</a><a aria-hidden="true" class="leve3 tocs-link" href="#中国镜像站安装">中国镜像站安装</a><a aria-hidden="true" class="leve4 tocs-link" href="#electronjs-镜像和缓存">electronjs 镜像和缓存</a><a aria-hidden="true" class="leve3 tocs-link" href="#身份验证相关配置">身份验证相关配置</a><a aria-hidden="true" class="leve2 tocs-link" href="#纯-esm-包">纯 ESM 包</a><a aria-hidden="true" class="leve3 tocs-link" href="#commonjs-项目移动到-esm">CommonJS 项目移动到 ESM</a><a aria-hidden="true" class="leve3 tocs-link" href="#typescript-项目输出-esm">TypeScript 项目输出 ESM</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="常用命令"><a aria-hidden="true" tabindex="-1" href="#常用命令"><span class="icon icon-link"></span></a>常用命令</h2><div class="wrap-body">
 <!--rehype:body-class=cols-2-->
 </div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="包管理"><a aria-hidden="true" tabindex="-1" href="#包管理"><span class="icon icon-link"></span></a>包管理</h3><div class="wrap-body">
 
@@ -283,6 +283,60 @@
 </span><span class="code-line"><span class="token comment"># 将注册表切换到 cnpm</span>
 </span><span class="code-line">$ nrm use cnpm       
 </span></code></pre>
+</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="npx"><a aria-hidden="true" tabindex="-1" href="#npx"><span class="icon icon-link"></span></a>npx</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
+<p>从本地或远程 npm 包运行命令</p>
+<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">npx -- <span class="token operator">&#x3C;</span>pkg<span class="token operator">></span><span class="token punctuation">[</span>@<span class="token operator">&#x3C;</span>version<span class="token operator">></span><span class="token punctuation">]</span> <span class="token punctuation">[</span>args<span class="token punctuation">..</span>.<span class="token punctuation">]</span>
+</span><span class="code-line">npx <span class="token parameter variable">--package</span><span class="token operator">=</span><span class="token operator">&#x3C;</span>pkg<span class="token operator">></span><span class="token punctuation">[</span>@<span class="token operator">&#x3C;</span>version<span class="token operator">></span><span class="token punctuation">]</span> -- <span class="token operator">&#x3C;</span>cmd<span class="token operator">></span> <span class="token punctuation">[</span>args<span class="token punctuation">..</span>.<span class="token punctuation">]</span>
+</span><span class="code-line">npx <span class="token parameter variable">-c</span> <span class="token string">'&#x3C;cmd> [args...]'</span>
+</span><span class="code-line">npx <span class="token parameter variable">--package</span><span class="token operator">=</span>foo <span class="token parameter variable">-c</span> <span class="token string">'&#x3C;cmd> [args...]'</span>
+</span></code></pre>
+<!--rehype:className=wrap-text-->
+<p><code>npx</code> 二进制文件在 <code>npm v7.0.0</code> 中被重写，并且当时不推荐使用独立的 <code>npx</code> 包</p>
+<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> eslint
+</span><span class="code-line"><span class="token comment"># 运行：</span>
+</span><span class="code-line">$ ./node_modules/.bin/eslint
+</span></code></pre>
+<p>上面命令简化，直接运行下面👇命令</p>
+<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ npx eslint
+</span></code></pre>
+<p>命令 <code>npx</code> 将自动安装并运行 <code>eslint</code></p>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="npx-vs-npm-exec"><a aria-hidden="true" tabindex="-1" href="#npx-vs-npm-exec"><span class="icon icon-link"></span></a>npx VS npm exec</h3><div class="wrap-body">
+<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ npx foo@latest bar <span class="token parameter variable">--package</span><span class="token operator">=</span>@npmcli/foo
+</span><span class="code-line"><span class="token comment"># npm 将解析 foo 包名，并运行以下命令：</span>
+</span><span class="code-line">$ foo bar <span class="token parameter variable">--package</span><span class="token operator">=</span>@npmcli/foo
+</span></code></pre>
+<!--rehype:className=wrap-text-->
+<p>由于 npm 的参数解析逻辑，运行这个命令是不同的:</p>
+<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token builtin class-name">exec</span> foo@latest bar <span class="token parameter variable">--package</span><span class="token operator">=</span>@npmcli/foo
+</span><span class="code-line"><span class="token comment"># npm 将首先解析 --package 选项</span>
+</span><span class="code-line"><span class="token comment"># 解析 @npmcli/foo 包</span>
+</span><span class="code-line"><span class="token comment"># 然后，它将在该上下文中执行以下命令：</span>
+</span><span class="code-line">$ foo@latest bar
+</span></code></pre>
+<!--rehype:className=wrap-text-->
+<p>下面命令是与 <code>npx</code> 等效的</p>
+<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token builtin class-name">exec</span> -- foo@latest bar <span class="token parameter variable">--package</span><span class="token operator">=</span>@npmcli/foo
+</span><span class="code-line"><span class="token comment"># 等效的</span>
+</span><span class="code-line">$ npx foo@latest bar <span class="token parameter variable">--package</span><span class="token operator">=</span>@npmcli/foo
+</span></code></pre>
+<!--rehype:className=wrap-text-->
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="npx-vs-npm-exec-示例"><a aria-hidden="true" tabindex="-1" href="#npx-vs-npm-exec-示例"><span class="icon icon-link"></span></a>npx VS npm exec 示例</h3><div class="wrap-body">
+<p>使用提供的参数在本地依赖项中运行 <code>tap</code> 版本：</p>
+<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token builtin class-name">exec</span> -- tap <span class="token parameter variable">--bail</span> test/foo.js
+</span><span class="code-line">$ npx tap <span class="token parameter variable">--bail</span> test/foo.js
+</span></code></pre>
+<p>通过指定 <code>--package</code> 选项运行名称与包名称匹配的命令以外的命令：</p>
+<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token builtin class-name">exec</span> <span class="token parameter variable">--package</span><span class="token operator">=</span>foo -- bar --bar-argument
+</span><span class="code-line"><span class="token comment"># ~ or ~</span>
+</span><span class="code-line">$ npx <span class="token parameter variable">--package</span><span class="token operator">=</span>foo bar --bar-argument
+</span></code></pre>
+<!--rehype:className=wrap-text-->
+<p>在当前项目的上下文中运行任意 <code>shell</code> 脚本：</p>
+<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> x <span class="token parameter variable">-c</span> <span class="token string">'eslint &#x26;&#x26; say "hooray, lint passed"'</span>
+</span><span class="code-line">$ npx <span class="token parameter variable">-c</span> <span class="token string">'eslint &#x26;&#x26; say "hooray, lint passed"'</span>
+</span></code></pre>
+<!--rehype:className=wrap-text-->
 </div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="配置"><a aria-hidden="true" tabindex="-1" href="#配置"><span class="icon icon-link"></span></a>配置</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="npmrc"><a aria-hidden="true" tabindex="-1" href="#npmrc"><span class="icon icon-link"></span></a>.npmrc</h3><div class="wrap-body">