<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ NPM - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。 ]]>
        </description>
        <link>https://www.freecodecamp.org/chinese/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ NPM - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/chinese/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Mon, 25 May 2026 04:47:01 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/chinese/news/tag/npm/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ 如何更新 NPM 依赖 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：How to Update NPM Dependencies [https://www.freecodecamp.org/news/how-to-update-npm-dependencies/]，作者：Natalie Pina [https://www.freecodecamp.org/news/author/natalie/] Node 软件包管理器（NPM）提供了各种功能来帮助你安装和维护项目的依赖关系。 由于错误修复、新功能和其他更新，依赖关系可能会随着时间的推移而变得过时。你的项目依赖越多，就越难跟上这些更新。 老旧的软件包会对安全构成威胁，并会对性能产生负面影响。最新的软件包可以防止出现漏洞。这意味着定期检查和更新依赖是很重要的。 如何保持依赖是最新的 现在，你可以逐一查看 package.json  中的每一个单独的包，改变版本，然后运行 npm install <package>@latest  来获得最新版本。但这并不是最有效的方法。 想象一下，如果你有 20 个或更多的包，可以使用版本升级。相反，你应该制定一个工作流程，在过期的依赖关系数量增加和升级 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/how-to-update-npm-dependencies/</link>
                <guid isPermaLink="false">62d1260a8d13aa0845c628d3</guid>
                
                    <category>
                        <![CDATA[ NPM ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ luojiyin ]]>
                </dc:creator>
                <pubDate>Fri, 15 Jul 2022 08:00:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/07/deps.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/how-to-update-npm-dependencies/">How to Update NPM Dependencies</a>，作者：<a href="https://www.freecodecamp.org/news/author/natalie/">Natalie Pina</a></p><!--kg-card-begin: markdown--><p>Node 软件包管理器（NPM）提供了各种功能来帮助你安装和维护项目的依赖关系。</p>
<p>由于错误修复、新功能和其他更新，依赖关系可能会随着时间的推移而变得过时。你的项目依赖越多，就越难跟上这些更新。</p>
<p>老旧的软件包会对安全构成威胁，并会对性能产生负面影响。最新的软件包可以防止出现漏洞。这意味着定期检查和更新依赖是很重要的。</p>
<h2 id="">如何保持依赖是最新的</h2>
<p>现在，你可以逐一查看 <code>package.json</code> 中的每一个单独的包，改变版本，然后运行 <code>npm install &lt;package&gt;@latest</code> 来获得最新版本。但这并不是最有效的方法。</p>
<p>想象一下，如果你有 20 个或更多的包，可以使用版本升级。相反，你应该制定一个工作流程，在过期的依赖关系数量增加和升级变得越来越难之前，定期检查新版本。</p>
<p>下面是一个我保持更新的工作流程：首先，发现哪些软件包需要更新，以及版本落后的程度。接下来，选择单独或一起批量更新软件包。始终对更新进行测试，以确保没有发生破坏性变化。</p>
<p>我更喜欢单独执行主要版本的更新。对于主要的更新，你很可能会遇到破坏性的变化。与许多包相比，撤销或处理与一个包有关的代码变化要容易得多。</p>
<p>在这篇文章中，我将详细介绍检查和升级依赖关系的方法。</p>
<h2 id="npmoutdated">怎样使用 <code>npm outdated</code> 命令</h2>
<pre><code class="language-shell">npm outdated
</code></pre>
<p>该命令将检查每个已安装的依赖关系，并将当前版本与 <a href="https://www.npmjs.com/">npm registry</a> 中的最新版本进行比较。它在终端打印出一个表格，概述了可用的版本。</p>
<p>它是内置在 NPM 中的，所以不需要下载额外的软件包。<code>npm outdated</code> 是一个很好的开始，可以了解所需的依赖性更新的数量。</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/07/Screen-Shot-2022-07-03-at-1.14.41-PM.png" alt="Screen-Shot-2022-07-03-at-1.14.41-PM" width="600" height="400" loading="lazy"></p>
<ul>
<li><code>Current</code> 是当前安装的版本。</li>
<li><code>Wanted</code> 是根据<a href="https://docs.npmjs.com/misc/semver">semver</a> 范围内的软件包的最大版本。</li>
<li><code>Latest</code> 是在 npm registry 中被标记为最新的软件包版本。</li>
</ul>
<p>使用这种方法，要安装每个软件包的更新，你只需要运行：</p>
<pre><code class="language-shell">npm update
</code></pre>
<p>请记住，使用 <code>npm update</code> 它永远不会更新到一个主要的（major），具有破坏性变化的版本。它更新 <code>package.json</code> 和 <code>package-lock.json</code> 中的依赖关系。它将使用 <code>想要的</code> 版本。</p>
<p>为了获得 "最新 "的版本，在单个安装中附加 <code>@latest</code>，例如 <code>npm install react@latest</code>。</p>
<h2 id="npmcheckupdates">怎样使用 <code>npm-check-updates</code></h2>
<p>对于高级和可定制的升级体验，我推荐 <a href="https://www.npmjs.com/package/npm-check-updates"><code>npm-check-updates</code></a>。这个包可以做所有 <code>npm oudated</code> 和 <code>npm upgrade</code> 能做的事情，并增加了一些自定义选项。不过，它确实需要安装一个包。</p>
<p>要开始使用，请在全局安装 <a href="https://www.npmjs.com/package/npm-check-updates"><code>npm-check-updates</code></a> 软件包：</p>
<pre><code class="language-shell">npm install -g npm-check-updates
</code></pre>
<p>然后，运行 <code>ncu</code> 来显示要升级的软件包。与 <code>npm outdated</code> 类似，它不会产生任何变化。</p>
<pre><code class="language-shell">ncu
Checking package.json
[====================] 12/12 100%

 @testing-library/user-event    ^13.5.0  →  ^14.2.1
 @types/jest                    ^27.5.2  →  ^28.1.4
 @types/node                  ^16.11.42  →  ^18.0.1

Run ncu -u to upgrade package.json
</code></pre>
<p>要升级依赖性，你只需要运行：</p>
<pre><code class="language-shell">ncu --upgrade

// or 
ncu -u
</code></pre>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/07/screenshot.png" alt="screenshot" width="600" height="400" loading="lazy"></p>
<p>资料：<a href="https://www.npmjs.com/package/npm-check-updates">npm-check-updates</a></p>
<ul>
<li>Red  （显示红色） = major  （主版本，或者说是大版本）</li>
<li>Cyan （显示青色） = minor（次要版本）</li>
<li>Green（显示绿色）  = patch （补丁版本）</li>
</ul>
<p>这个方法只更新 <code>package.json</code> 文件中的依赖关系，并且会选择最新的版本，即使它包括一个破坏性的变化。使用这种方法，<code>npm install</code> 不会自动运行，所以一定要在之后运行它来更新 <code>package-lock.json</code>。</p>
<p>要选择你喜欢的版本类型，运行 <code>ncu --target [patch, minor, latest, newest, greatest]</code>。</p>
<h3 id="npmcheckupdates">如何使用 <code>npm-check-updates</code> 互动模式</h3>
<pre><code class="language-shell">ncu --interactive

// or 
ncu -i
</code></pre>
<p>互动模式允许你选择特定的软件包进行更新。默认情况下，所有软件包都被选中。</p>
<p>向下浏览每一个软件包，用空格来取消选择，当你准备好升级所有选择的软件包时，回车键（enter）确定。</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/07/175337598-cdbb2c46-64f8-44f5-b54e-4ad74d7b52b4.png" alt="175337598-cdbb2c46-64f8-44f5-b54e-4ad74d7b52b4" width="600" height="400" loading="lazy"></p>
<p>资料: <a href="https://www.npmjs.com/package/npm-check-updates">npm-check-updates</a></p>
<p>有几种方法可以提升交互式 <code>npm-check-updates</code> 的体验。</p>
<pre><code class="language-shell">ncu --interactive --format group
</code></pre>
<p>这个命令将软件包分组并组织成 主版本（major）、次要（minor）和补丁（patch）版本。</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/07/175336533-539261e4-5cf1-458f-9fbb-a7be2b477ebb--1-.png" alt="175336533-539261e4-5cf1-458f-9fbb-a7be2b477ebb--1-" width="600" height="400" loading="lazy"></p>
<p>资料: <a href="https://www.npmjs.com/package/npm-check-updates">npm-check-updates</a></p>
<p><code>npm-check-updates</code> 提供了其他有用的工具，如 <a href="https://github.com/raineorshine/npm-check-updates#doctor-mode">doctor mode</a>，它可以安装升级并运行测试以检查破坏性变化。</p>
<p>我强烈建议看一下<a href="https://github.com/raineorshine/npm-check-updates">文档</a>，以了解更多关于这个包所提供的一切。在写这篇文章的时候，这个项目得到了很好的维护，每周的下载高达 <a href="https://www.npmjs.com/package/npm-check-updates">294,467 次</a>。</p>
<h2 id="">总结</h2>
<p>养成定期更新你的依赖关系的习惯，将有助于你的应用程序的安全性和性能。</p>
<p><code>npm oudated</code> 和 <code>npm-check-updates</code> 都是有用的工具，可以检查那些可以使用版本升级的软件包。</p>
<p>我建议尝试这两个工具，看看哪个能提供更好的开发者体验。</p>
<p>我希望这些方法在更新依赖关系上有所帮助！</p>
<!--kg-card-end: markdown--> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ npm Uninstall——如何删除包 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：npm Uninstall – How to Remove a Package [https://www.freecodecamp.org/news/npm-uninstall-how-to-remove-a-package/]，作者： Kolade Chris [https://www.freecodecamp.org/news/author/kolade/] Node 包管理器（NPM）提供了各种命令，让你可以可以使用包。 就像你可以从 npm 库中安装一个包一样，你也可以删除它。 要删除一个包，你可以使用 npm 提供的命令来实现这个目的——npm uninstall。 不过，你删除普通软件包和开发依赖的方式与你删除全局软件包和开发依赖的方式不同。 在这篇文章中，我将告诉你如何删除一个普通包、一个全局包和一个开发依赖。 如何用 npm Uninstall 删除一个包 要用 npm uninstall 命令删除一个包，可以在包所在的目录中使用 npm uninstall package-name 语法。 我将使用 Express——一个 NodeJS 框架，来演 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/npm-uninstall-how-to-remove-a-package/</link>
                <guid isPermaLink="false">6261206599ec7406219e730b</guid>
                
                    <category>
                        <![CDATA[ NPM ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Chengjun.L ]]>
                </dc:creator>
                <pubDate>Thu, 21 Apr 2022 03:20:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/04/shut-down-g5ad24366d_1280.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/npm-uninstall-how-to-remove-a-package/">npm Uninstall – How to Remove a Package</a>，作者：<a href="https://www.freecodecamp.org/news/author/kolade/">Kolade Chris</a></p><p>Node 包管理器（NPM）提供了各种命令，让你可以可以使用包。</p><p>就像你可以从 npm 库中安装一个包一样，你也可以删除它。</p><p>要删除一个包，你可以使用 npm 提供的命令来实现这个目的——<code>npm uninstall</code>。</p><p>不过，你删除普通软件包和开发依赖的方式与你删除全局软件包和开发依赖的方式不同。</p><p>在这篇文章中，我将告诉你如何删除一个普通包、一个全局包和一个开发依赖。</p><h2 id="-npm-uninstall-"><strong>如何用 npm Uninstall 删除一个包</strong></h2><p>要用 <code>npm uninstall</code> 命令删除一个包，可以在包所在的目录中使用 <code>npm uninstall package-name</code> 语法。</p><p>我将使用 Express——一个 NodeJS 框架，来演示如何删除一个软件包。</p><p>在下面的截图中，你可以看到 Express 被列为 <code>package.json</code> 文件中的一个依赖项。</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-1.png" class="kg-image" alt="ss-1" width="600" height="400" loading="lazy"></figure><p>但是在我运行 <code>npm uninstall express</code> 之后，你会看到 Express 不再被列为依赖项了：</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-2.png" class="kg-image" alt="ss-2" width="600" height="400" loading="lazy"></figure><p>你可以看到没有 Express 了，甚至没有依赖键了，因为没有依赖项了。</p><h2 id="-npm-uninstall--1">如何用 npm uninstall 删除一个开发依赖项</h2><p>开发依赖是指仅在开发期间使用的软件包。</p><p>要删除一个开发依赖，你需要在<strong> </strong><code>npm uninstall</code><strong> </strong>中附加 <code>-D</code> 或 <code>-save-dev</code> 标志，然后指定软件包的名称。</p><p>这样做的基本语法是 <code>npm uninstall -D package-name</code> 或 <code>npm uninstall --save-dev package-name</code>。</p><p>你必须在依赖所在的目录（文件夹）中运行该命令。</p><p>我将使用 Nodemon 来演示如何删除一个开发依赖。</p><p>Nodemon 可以让你的 NodeJS 应用程序在开发过程中检测到文件或文件夹的变化时自动重新加载。</p><p>在下面的截图中，你可以看到 Nodemon 被列为一个开发依赖项。</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-3.png" class="kg-image" alt="ss-3" width="600" height="400" loading="lazy"></figure><p>我运行 <code>npm uninstall –D nodemon</code> 来删除它。</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-4.png" class="kg-image" alt="ss-4" width="600" height="400" loading="lazy"></figure><p>你可以看到在 <code>package.json</code> 文件中没有 Nodemon 了。</p><h2 id="-npm-uninstall--2"><strong>如何用 npm Uninstall 删除一个全局包</strong></h2><p>全局包是指在你的机器上全局安装的包，所以你不必在每次需要它时都重新安装它。</p><p>要删除一个全局包，你需要在 <code>npm uninstall</code> 中加上 <code>-g</code> 标志，然后指定包的名称。</p><p>这样做的基本语法是 <code>npm uninstall -g package-name</code>。</p><p>为了向你展示如何删除一个全局包，我将使用一个叫做 CORS（跨源资源共享）的包。</p><p>CORS 阻止了浏览器的同源政策（SOP），所以你可以从一个浏览器向另一个浏览器发出请求。</p><p>在下面的截图中，你可以看到 CORS 在 <code>package.json</code> 文件中没有被列为一个包。</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-5.png" class="kg-image" alt="ss-5" width="600" height="400" loading="lazy"></figure><p>CORS 没有被列出，因为它在我的机器上是全局安装的，而不是在一个项目的目录下。</p><p>如果你全局安装了一个包，并且你想看到它，运行 <code>npm list -g</code>。</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-6.png" class="kg-image" alt="ss-6" width="600" height="400" loading="lazy"></figure><p>你可以看到 CORS 现在被列为一个全局包。</p><p>为了全局删除 CORS，我现在将运行 <code>npm uninstall -g cors</code>。</p><p>运行该命令后，你可以看到当我运行 <code>npm list –g</code> 时，已经没有 CORS 了。</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2022/03/ss-7.png" class="kg-image" alt="ss-7" width="600" height="400" loading="lazy"></figure><h2 id="-"><strong>总结</strong></h2><p>在这篇文章中，你学到了删除不同种类的 NPM 包的各种方法，所以你可以对你的代码库有更多的控制，并删除不必要的包。</p><p>谢谢你阅读本文。</p><p>如果你觉得这篇文章对你有帮助，请分享给大家，让其他人也能看到。</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ npm 和 npx 的区别是什么 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：npm vs npx — What’s the Difference [https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/]，作者： Carol-Theodor Pelu [https://www.freecodecamp.org/news/author/carol-theodor-pelu/] 如果你曾经使用过 Node.js [https://nodejs.org/]，那么你肯定使用过 npm。 npm（node package manager）是你安装 Node.js 时开箱即用的依赖/包管理器。它为开发者提供了一种在全局和本地安装包的方法。 有时你可能想看一下特定的包，并尝试一些命令，但如果不在本地的 node_modules 文件夹中安装依赖项，你就无法做到这一点。 这就需要使用 npx。 在这篇文章中，我们将看看 npm 和 npx 的区别，并学习如何从两者中获得最佳效果。 首先，让我们了解一下 npm 到底是什么，以及我们能用它做什么。 这个视频作为补充资料。 软件包管 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/npm-vs-npx-whats-the-difference/</link>
                <guid isPermaLink="false">62136611230413063576099d</guid>
                
                    <category>
                        <![CDATA[ NPM ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Chengjun.L ]]>
                </dc:creator>
                <pubDate>Mon, 28 Feb 2022 02:30:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/02/npm-vs-npx-whats-the-difference-1024x538.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/">npm vs npx — What’s the Difference</a>，作者：<a href="https://www.freecodecamp.org/news/author/carol-theodor-pelu/">Carol-Theodor Pelu</a></p><p>如果你曾经使用过 <a href="https://nodejs.org/">Node.js</a>，那么你肯定使用过 npm。</p><p><strong>npm</strong>（node package manager）是你安装 Node.js 时开箱即用的依赖/包管理器。它为开发者提供了一种在全局和本地安装包的方法。</p><p>有时你可能想看一下特定的包，并尝试一些命令，但如果不在本地的 <code>node_modules</code> 文件夹中安装依赖项，你就无法做到这一点。</p><p>这就需要使用 <strong>npx</strong>。</p><p>在这篇文章中，我们将看看 <strong>npm</strong> 和 <strong>npx</strong> 的区别，并学习如何从两者中获得最佳效果。</p><p>首先，让我们了解一下 npm 到底是什么，以及我们能用它做什么。</p><p>这个视频作为补充资料。</p><figure class="kg-card kg-embed-card" data-test-label="fitted">
        <div class="fluid-width-video-container">
          <div style="padding-top: 56.49999999999999%;" class="fluid-width-video-wrapper">
            <iframe width="200" height="113" src="https://www.youtube.com/embed/fSHWc8RTJug?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
          </div>
        </div>
      </figure><h2 id="-npm">软件包管理器 npm</h2><p>npm 有几个功能。首先，它是一个用于发布开源 Node.js 项目的在线资源库。</p><p>其次，它是一个 CLI 工具，可以帮助你安装这些包并管理它们的版本和依赖关系。npm 上有几十万个 Node.js 库和应用程序，而且人们每天都会添加更多。</p><p>npm 本身并不运行任何软件包。如果你想使用 npm 运行一个包，你必须在 <code>package.json</code> 文件中指定这个包。</p><p>当可执行文件通过 npm 包安装时，npm 会创建链接指向它们。</p><ul><li>本地安装的链接是在 <code>./node_modules/.bin/</code> 目录下创建的</li><li>全局安装会在全局 <code>bin/</code> 目录下创建链接（例如：Linux 上的 <code>/usr/local/bin</code> 或 Windows 上的 <code>%AppData%/npm</code>）</li></ul><p>要用 npm 执行一个包，你必须输入本地路径，像这样。</p><pre><code class="language-bash">$ ./node_modules/.bin/your-package</code></pre><p>或者你可以通过在脚本部分的 <code>package.json</code> 文件中添加一个本地安装的软件包来运行它，像这样：</p><pre><code class="language-js">{
  "name": "your-application",
  "version": "1.0.0",
  "scripts": {
    "your-package": "your-package"
  }
}</code></pre><p>然后你可以用 <code>npm run</code> 来运行这个脚本：</p><pre><code class="language-bash">npm run your-package</code></pre><p>你可以看到，用普通的 npm 运行一个包需要相当多的步骤。</p><p>幸运的是，这正是 <strong>npx</strong> 派上用场的地方。</p><h2 id="npx-">npx 软件包运行器</h2><p>自从 npm 5.2.0 版本以来，npx 就被预先捆绑在 npm 中，所以它现在几乎是一个标准。</p><p><strong>npx</strong> 也是一个 CLI 工具，其目的是使安装和管理托管在 npm 注册表中的依赖关系变得容易。</p><p>现在，运行任何一种基于 Node.js 的可执行文件都非常容易，你通常会通过 npm 安装。</p><p>你可以运行以下命令，看看你当前的 npm 版本是否已经安装：</p><pre><code class="language-bash">$ which npx</code></pre><p>如果没有，你可以运行以下命令：</p><pre><code class="language-bash">$ npm install -g npx</code></pre><p>一旦你确定你已经安装了它，让我们看看使 <strong>npx</strong> 非常有用的一些使用场景。</p><h3 id="-">轻松运行一个本地安装的软件包</h3><p>如果你想执行一个本地安装的软件包，你只需要输入：</p><pre><code class="language-bash">$ npx your-package</code></pre><p>npx 将检查 <code>&lt;command&gt;</code> 或 <code>&lt;package&gt;</code> 是否存在于 <code>$PATH</code> 或本地项目的二进制文件中，如果存在，npx 将执行它。</p><h3 id="--1">执行以前没有安装的软件包</h3><p>另一个主要优势是能够执行以前没有安装的软件包。</p><p>让我们通过运行来测试一下：</p><pre><code class="language-bash">$ npx cowsay wow	</code></pre><figure class="kg-card kg-image-card"><img src="https://i2.wp.com/neutrondev.com/wp-content/uploads/2020/01/npx-cowsay-wow-npm-vs-npx.jpg" class="kg-image" alt="npx-cowsay-wow-npm-vs-npx" width="600" height="400" loading="lazy"></figure><p>这很了不起，因为有时你只是想使用一些 CLI 工具，但你不想为了测试它们而在全局安装它们。</p><p>这意味着你可以节省一些磁盘空间，只在需要时才运行它们。这也意味着你的全局变量将受到更少的污染。</p><h3 id="-github-">直接从 GitHub 上运行代码</h3><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/01/execute-gist-scripts-with-npx.jpg" class="kg-image" alt="execute-gist-script-with-npx" width="600" height="400" loading="lazy"></figure><p>这个很厉害。</p><p>你可以用 npx 来运行任何 GitHub gist 和仓库。让我们专注于执行 GitHub 的 gist，因为创建一个 gist 更容易。</p><p>最基本的脚本由主 JS 文件和 <code>package.json</code> 组成。在你设置好这些文件后，你所要做的就是运行带有该 gist 链接的 npx，如上图所示。</p><p>你可以在<a href="https://gist.github.com/Tynael/0861d31ea17796c9a5b4a0162eb3c1e8">这里</a>找到我在这个例子中使用的代码。</p><p><strong>确保你在执行任何脚本之前仔细阅读，以避免因恶意代码而发生的严重问题。</strong></p><h3 id="--2">测试不同版本的包</h3><p>npx 使测试一个 Node.js 包或模块的不同版本变得非常容易。为了测试这个很棒的功能，我们将在本地安装 <code>create-react-app</code> 包，并测试一个即将到来的版本。</p><p>这将在输出的最后列出一些 dist 标签。dist 标签提供了版本号的别名，这使得打字变得非常容易。</p><pre><code class="language-bash">$ npm v create-react-app</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/01/create-react-app-dist-tags.jpg" class="kg-image" alt="create-react-app-dist-tags" width="600" height="400" loading="lazy"></figure><p>让我们用 npx 来试试 <code>reate-react-app</code> 的 <code>next</code> dist标签，它将在一个沙盒目录内创建应用程序。</p><pre><code class="language-bash">$ npx create-react-app@next sandbox</code></pre><p>npx 会暂时安装下一个版本的 <code>create-react-app</code>，然后它就会执行，安装应用程序的依赖。</p><p>一旦安装完毕，我们就可以像这样导航到该应用程序：</p><pre><code class="language-bash">$ cd sandbox</code></pre><p>然后用这个命令启动它：</p><pre><code class="language-bash">$ npm start</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/01/create-react-app-npx-next-version.jpg" class="kg-image" alt="create-react-app-npx-next-version" width="600" height="400" loading="lazy"></figure><p>它将在你的默认浏览器窗口中自动打开 React 应用程序。现在我们有了一个在下一个版本的 <code>create-react-app</code> 包上运行的应用程序：</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/01/react-app.jpg" class="kg-image" alt="index-page-react-app" width="600" height="400" loading="lazy"><figcaption>你的 React 应用程序的索引页应该是这样的</figcaption></figure><h2 id="--3">总结</h2><p>npx 可以帮助我们避免版本问题、依赖问题和安装我们只是想尝试一下的不必要的软件包。</p><p>它还为执行软件包、命令、模块，甚至是 GitHub 的清单和仓库提供了一个清晰而简单的方法。</p><p>如果你以前没有使用过 npx，现在正是开始使用它的好时机。</p><p>这篇文章最初是在我的<a href="https://neutrondev.com/npm-vs-npx-whats-the-difference/">博客</a>上发布的。</p><p>你可以在 <a href="https://twitter.com/pelu_carol">Twitter</a> 和 <a href="https://www.facebook.com/neutrondevcom">Facebook</a> 上联系我，并向我提出任何问题。</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 什么是 npm —— 写给初学者的编程教程 ]]>
                </title>
                <description>
                    <![CDATA[ 前言 本篇文章可以作为 npm（Node.js 最喜欢的伙伴）的一个基本学习指南。 自 2009 年以来，Node.js 一直席卷全球。成千上万个系统基于 Node.js 构建，促使开发者在社区宣称“JavaScript 正在吞噬软件”。 Node 成功的主要因素之一是它广受欢迎的软件包管理器——npm，因为 npm 使 JavaScript 开发人员可以快速方便地共享软件包， 例如 lodash [https://www.npmjs.com/package/lodash] 和 moment [https://www.npmjs.com/package/moment]。 在我撰写这篇文章时，npm 已帮助发布了 130 万个软件包，每周下载量超过 160 亿次！ 这些数字对于任何软件工具来说都非常厉害。 所以，现在让我们讨论一下 npm 到底是什么。 NPM 是什么 npm（“Node 包管理器”）是 JavaScript 运行时 Node.js 的默认程序包管理器。 它也被称为“Ninja Pumpkin Mutants”，“Nonprofit Pizza Makers”， ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/</link>
                <guid isPermaLink="false">5f84642c5f583f0565090aa6</guid>
                
                    <category>
                        <![CDATA[ NPM ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Node.js ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ 古月 ]]>
                </dc:creator>
                <pubDate>Mon, 12 Oct 2020 13:11:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2020/10/cover-4.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <h2 id="-">前言</h2><p>本篇文章可以作为 npm（Node.js 最喜欢的伙伴）的一个基本学习指南。</p><p>自 2009 年以来，Node.js 一直席卷全球。成千上万个系统基于 Node.js 构建，促使开发者在社区宣称“JavaScript 正在吞噬软件”。</p><p>Node 成功的主要因素之一是它广受欢迎的软件包管理器——npm，因为 npm 使 JavaScript 开发人员可以快速方便地共享软件包， 例如 <a href="https://www.npmjs.com/package/lodash">lodash</a> &nbsp;和 <a href="https://www.npmjs.com/package/moment">moment</a>。</p><p>在我撰写这篇文章时，npm 已帮助发布了 130 万个软件包，每周下载量超过 160 亿次！ 这些数字对于任何软件工具来说都非常厉害。 所以，现在让我们讨论一下 npm 到底是什么。</p><h2 id="npm-">NPM 是什么</h2><p>npm（“Node 包管理器”）是 JavaScript 运行时 Node.js 的默认程序包管理器。</p><p>它也被称为“Ninja Pumpkin Mutants”，“Nonprofit Pizza Makers”，以及许多其他随机名称，你可以在 &nbsp;<a href="https://github.com/npm/npm-expansions">npm-expansions</a> &nbsp;上探索这些名称。</p><p>npm 由两个主要部分组成:</p><ul><li>用于发布和下载程序包的 CLI（命令行界面）工具</li><li>托管 JavaScript 程序包的 &nbsp;<a href="https://www.npmjs.com/">在线存储库</a></li></ul><p>为了更直观地解释，我们可以将存储库 &nbsp;<a href="https://npmjs.com/">npmjs.com</a> &nbsp;视为一个物流集散中心，该中心从卖方（npm 包裹的作者）那里接收货物的包裹，并将这些货物分发给买方（npm 包裹的用户）。</p><p>为了促进此过程，<a href="https://npmjs.com/">npmjs.com</a> &nbsp;物流集散中心雇用了一群勤劳的袋熊（npm CLI），他们将被分配给每个 &nbsp;<a href="https://npmjs.com/">npmjs.com</a> &nbsp;用户作为私人助理。 因此，dependencies（依赖项）会如下传递给 JavaScript 开发人员：</p><figure class="kg-card kg-image-card"><img src="https://camo.githubusercontent.com/26f5c4e6537732f5e6a5c36c4f0f54ebefd70f19/68747470733a2f2f7777772e66726565636f646563616d702e6f72672f6e6577732f636f6e74656e742f696d616765732f323032302f30362f776f6d6261742d696e7374616c6c2e706e67" class="kg-image" alt="68747470733a2f2f7777772e66726565636f646563616d702e6f72672f6e6577732f636f6e74656e742f696d616765732f323032302f30362f776f6d6261742d696e7374616c6c2e706e67" width="600" height="400" loading="lazy"></figure><p>发布 JS 软件包的过程如下：</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/image-5.png" class="kg-image" alt="image-5" width="600" height="400" loading="lazy"></figure><p>让我们看看这只袋熊如何协助想要在项目中使用 JavaScript 包的开发人员。下面我们还将看到它们（npm CLI）如何帮助开源向导将其出色的库推向世界。</p><h2 id="package-json">package.json</h2><p>每个 JavaScript 项目（无论是 Node.js 还是浏览器应用程序）都可以被当作 npm 软件包，并且通过 &nbsp;<code>package.json</code> &nbsp;来描述项目和软件包信息。</p><p>我们可以将 &nbsp;<code>package.json</code> &nbsp;视为快递盒子上的运输信息。</p><p>当运行 &nbsp;<code>npm init</code> &nbsp;初始化 JavaScript/Node.js 项目时，将生成 &nbsp;<code>package.json</code> &nbsp;文件，文件内的内容(基本元数据)由开发人员提供：</p><ul><li><code>name</code>：JavaScript 项目或库的名称。</li><li><code>version</code>：项目的版本。通常，在应用程序开发中，由于没有必要对开源库进行版本控制，因此经常忽略这一块。但是，仍可以用它来定义版本。</li><li><code>description</code>：项目的描述。</li><li><code>license</code>：项目的许可证。</li></ul><h3 id="npm-scripts">npm scripts</h3><p><code>package.json</code> &nbsp;还支持一个 &nbsp;<code>scripts</code> &nbsp;属性，可以把它当作在项目本地运行的命令行工具。例如，一个 npm 项目的 &nbsp;<code>scripts</code>部分可能看起来像这样：</p><pre><code class="language-json">{
  "scripts": {
    "build": "tsc",
    "format": "prettier --write **/*.ts",
    "format-check": "prettier --check **/*.ts",
    "lint": "eslint src/**/*.ts",
    "pack": "ncc build",
    "test": "jest",
    "all": "npm run build &amp;&amp; npm run format &amp;&amp; npm run lint &amp;&amp; npm run pack &amp;&amp; npm test"
  }
}
</code></pre><p><code>eslint</code>，<code>prettier</code>，<code>ncc</code>，<code>jest</code> &nbsp;不是安装为全局可执行文件，而是安装在项目本地的 <code>node_modules/.bin/</code> 中。</p><p>最新引入的 &nbsp;<a href="https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/">npx</a> &nbsp;使我们可以像在全局安装程序一样运行这些 &nbsp;<code>node_modules</code> &nbsp;项目作用域命令，方法是在其前面加上 &nbsp;<code>npx ...</code>（即<code>npx prettier --write ** / *。ts</code>）。</p><h3 id="dependencies-vs-devdependencies">dependencies vs devDependencies</h3><p>这两个以键值对象的形式出现，其中 npm 库的名称为键，其<a href="https://semver.org/">语义格式</a>版本为值。 大家可以看看 <a href="https://github.com/actions/typescript-action">Github 的 TypeScript 操作模板</a>中的示例：</p><pre><code class="language-json">{
  "dependencies": {
    "@actions/core": "^1.2.3",
    "@actions/github": "^2.1.1"
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.0",
    "@typescript-eslint/parser": "^2.22.0",
    "@zeit/ncc": "^0.21.1",
    "eslint": "^6.8.0",
    "eslint-plugin-github": "^3.4.1",
    "eslint-plugin-jest": "^23.8.2",
    "jest": "^25.1.0",
    "jest-circus": "^25.1.0",
    "js-yaml": "^3.13.1",
    "prettier": "^1.19.1",
    "ts-jest": "^25.2.1",
    "typescript": "^3.8.3"
  }
}</code></pre><p>这些依赖通过带有 &nbsp;<code>--save</code> &nbsp;或 &nbsp;<code>--save-dev</code> &nbsp;标志的 &nbsp;<code>npm install</code> &nbsp;命令安装。 它们分别用于生产和开发/测试环境。 在下一节中，我们将更深入地研究这些软件包的安装。</p><p>同时，理解语义版本前面的符号非常重要（假设你已经阅读 <a href="https://semver.org/">semver</a> 的 &nbsp;<code>major.minor.patch</code> &nbsp;模型）：</p><ul><li><code>^</code>：表示最新的次版本，例如， <code>^1.0.4</code> &nbsp;可能会安装主版本系列 &nbsp;<code>1</code> &nbsp;的最新次版本 <code>1.3.0</code>。</li><li><code>〜</code>：表示最新的补丁程序版本，与 &nbsp;<code>^</code> &nbsp;类似， <code>〜1.0.4</code> &nbsp;可能会安装次版本系列 <code>1.0</code> &nbsp;的最新次版本<code>1.0.7</code>。</li></ul><p>所有这些确切的软件包版本都将记录在 &nbsp;<code>package-lock.json</code> &nbsp;文件中。</p><h3 id="package-lock-json">package-lock.json</h3><p>该文件描述了 npm JavaScript 项目中使用的依赖项的确切版本。如果 &nbsp;<code>package.json</code> &nbsp;是通用的描述性标签，则 &nbsp;<code>package-lock.json</code> &nbsp;是成分表。</p><p>就像我们通常不会读取食品包装袋上的成分表（除非你太无聊或需要知道）一样，<code>package-lock.json</code> &nbsp;并不会被开发人员一行一行进行读取。</p><p><code>package-lock.json</code> &nbsp;通常是由 &nbsp;<code>npm install</code> &nbsp;命令生成的，也可以由我们的 NPM CLI 工具读取，以确保使用 &nbsp;<code>npm ci</code> &nbsp;复制项目的构建环境。</p><h2 id="-npm">用户如何使用 NPM</h2><p>从前面提到的 130 万个发布的软件包中，有 160 亿次下载，可以推断出，大多数 npm 用户都朝这个方向使用 npm。所以，了解如何使用这个强大的工具会很有帮助。</p><h3 id="npm-install">npm install</h3><p>这是现在我们开发 JavaScript/Node.js 应用程序时最常用的命令。</p><p>默认情况下，<code>npm install &lt;package-name&gt;</code> &nbsp;将安装带有 &nbsp;<code>^</code> &nbsp;版本号的软件包的最新版本。npm 项目上下文中的 &nbsp;<code>npm install</code> &nbsp;将根据 &nbsp;<code>package.json</code> &nbsp;规范将软件包下载到项目的 &nbsp;<code>node_modules</code> &nbsp;文件夹中，从而升级软件包的版本（并重新生成 &nbsp;<code>package-lock.json</code> &nbsp;）。 <code>npm install &lt;package-name&gt;</code> &nbsp;可以基于 &nbsp;<code>^</code> &nbsp;和 &nbsp;<code>〜</code> &nbsp;版本匹配。</p><p>如果要在全局上下文中安装程序包，可以在机器的任何地方使用它，则可以指定全局标志 &nbsp;<code>-g</code>（例如 &nbsp;<a href="https://github.com/tapio/live-server">live-server</a>）。</p><p>npm 使安装 JavaScript 软件包非常容易，以至于经常错误地使用此命令。 导致一些程序员对 npm 开这样的玩笑：</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/image-6.png" class="kg-image" alt="image-6" width="600" height="400" loading="lazy"></figure><p>但是，npm 包太大、太深这样的问题可以通过 &nbsp;<code>--production</code> &nbsp;标志来拯救！在上一节中，我们讨论了分别用于生产和开发/测试环境的 &nbsp;<code>dependencies</code> &nbsp;和 &nbsp;<code>devDependencies</code> &nbsp;。 这个 &nbsp;<code>--production</code> &nbsp;标志是如何在 &nbsp;<code>node_modules</code> &nbsp;中进行区别的。</p><p>通过将此标志附加到 &nbsp;<code>npm install</code> &nbsp;命令，我们将仅从 &nbsp;<code>dependencies</code> &nbsp;安装软件包，从而将 &nbsp;<code>node_modules</code> &nbsp;的大小大大减小到应用程序正常运行所必需的大小。——不应该将 &nbsp;<code>devDependencies</code> &nbsp;引入生产环境！</p><h3 id="npm-ci">npm ci</h3><p>因此，如果 &nbsp;<code>npm install --production</code> &nbsp;对于生产环境是最佳选项，那么是否必须有一个对本地环境，测试环境最合适的选项？</p><p>答案是 &nbsp;<code>npm ci</code>。</p><p>就像如果 &nbsp;<code>package_lock.json</code> &nbsp;尚不存在于项目中一样，无论何时调用 &nbsp;<code>npm install</code> &nbsp;都会生成它，<code>npm ci</code> &nbsp;会消耗该文件来下载项目所依赖的每个软件包的确切版本。 </p><p>这样，无论是用于本地开发的笔记本电脑还是 Github Actions 等 CI（持续集成）构建环境，我们都可以确保项目上下文在不同机器上保持完全相同。</p><h3 id="npm-audit">npm audit</h3><p>随着越来越多的软件包发布，并且易于安装，因此 npm 软件包容易受到恶意作者的恶意攻击，例如<a href="https://medium.com/@jsoverson/how-two-malicious-npm-packages-targeted-sabotaged-one-other-fed7199099c8">这些</a>。</p><p>意识到生态系统存在问题，npm.js 组织提出了 &nbsp;<code>npm audit</code> &nbsp;的<a href="https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure">主意</a>。 他们维护了一个安全漏洞列表，开发人员可以使用 &nbsp;<code>npm audit</code> &nbsp;命令来审核项目中的依赖项。</p><p><code>npm audit</code> &nbsp;为开发人员提供了有关漏洞以及是否有要修复的版本的信息，例如：</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/image-8.png" class="kg-image" alt="image-8" width="600" height="400" loading="lazy"></figure><p>如果补救措施在下一个不间断的版本升级中可用，则可以使用 &nbsp;<code>npm audit fix</code> &nbsp;来自动升级受影响的依赖项的版本。</p><h2 id="-npm-1">作者如何使用 NPM</h2><p>我们已经了解了作为用户，如何通过 NPM CLI 有效得使用 NPM，但是作为作者又如何使用呢？</p><h3 id="npm-publish">npm publish</h3><p>将软件包发送到 &nbsp;<a href="https://npmjs.com/">npmjs.com</a> &nbsp;非常容易，因为我们只需要运行 &nbsp;<code>npm publish</code> &nbsp;。 棘手的部分（并非专门针对 npm 软件包作者）是确定软件包的版本。</p><p>根据 &nbsp;<a href="https://semver.org/">semver.org</a> &nbsp;的经验法则：</p><ol><li>当你进行不兼容的 API 更改时使用 MAJOR 版本</li><li>以向后兼容的方式添加功能时使用 MINOR 版本</li><li>进行向后兼容的 bug 修复时使用 PATCH 版本</li></ol><p>在发布软件包时，遵循上述规则尤为重要，可以确保你不会破坏任何人的代码，因为 npm 中匹配的默认版本是<code>^</code>（又称下一个次版本）。</p><h2 id="-npm-javascript-node-js-">❤️ &nbsp;npm &nbsp;❤️ &nbsp;JavaScript &nbsp;❤️ &nbsp;Node.js &nbsp;❤️</h2><p>了解了以上知识，我们就可以开始有效地使用 npm 并指挥可爱的袋熊大军啦！</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/image-9.png" class="kg-image" alt="image-9" width="600" height="400" loading="lazy"></figure><p>原文：<a href="https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/">What is npm? A Node Package Manager Tutorial for Beginners</a>，作者：Stanley Nguyen</p> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
