带你深入了解NPM——NPM初学者指南

2023-11-15

前段时间,我们邀请了我们“城内”(葡萄城)资深开发工程师刘涛为大家分享了一次干货满满的关于Electron线上公开课,在课程过程中有不少同学对于NPM的概念和用法有一些疑问,所以这次我们希望通过这篇文章来解答各位同学的问题。另外在介绍的基础上,我们还会适当的深入介绍下,如何在npm上发布第一个属于自己的包。那么,让我们马上开始吧!

得益于Node.js的模块化生态系统,我们基本上可以把NPM认为是任何Node项目的基础组成的一部分。但实际上,我们甚至可以说NPM是Node.js开发人员在开发者社区中最重要的工具之一。毕竟,他们每天都使用它来管理他们的项目使用的包。

但是,除了用它安装软件包外,大家是否真正深入了解过NPM呢?因此,我将尝试介绍该工具的基础知识,让您更深入地了解并使用它,而不是仅仅了解npm install而已。

 

包管理

我们都知道你可以使用NPM安装软件包,但究竟是什么意思呢?包基本上是包含您需要的代码的文件夹,您可以在本地或全局安装它。

本地安装

本地安装意味着您实际上将文件下载到项目的文件夹中。在其中,您将找到一个您未创建的目录,称为“node_modules”。由于这种简单的机制,这个本地文件夹可能会变得非常大。

那么究竟这个文件夹有多大?一张图来为你形容:

 

 

 

其实这只是个玩笑,通常你可以忽略该文件夹,让Node.js为你处理它。

要执行本地安装,您只需:

$ npm install [package-name]

您可以添加—save后缀,Node会把包名称和版本保存到您的package.json 文件中。请记住,这一点很重要(甚至至关重要),因为当你作为团队中的一份子在工作时,你不会分发,也不会将node_modules文件夹添加到版本控制系统(无论是GIT,SVN还是你正在使用的任何版本管理系统),而只需简单地分享package.json文件,然后让你的队友执行$npm install命令,即可完成包的安装和更新。这比共享整个文件夹更快,更容易维护,整个文件夹可以增长到包含千兆字节的数据。

以下是一个package.json文件的结构:

{

 

  "name": "Project name",

 

  "version": "1.0.0",

 

  "description": "This is a basic description",

 

  "main": "index.js",

 

  "scripts": {

 

    "test": "echo \"Error: no test specified\" && exit 1"

 

  },

 

  "author": "Fernando Doglio",

 

  "license": "ISC",

 

  "dependencies": {

 

    "config": "^3.1.0",

 

    "express": "^4.17.1",

 

    "socket.io": "^2.2.0",

 

    "winston": "^3.2.1"

 

  }

 }

 

 

您可能会改变一些,具体取决于您安装的软件包,或者您需要的文件的哪些字段(上面的示例中没有使用的其他许多字段)。

全局安装

您还可以全局安装软件包,这意味着Node.js将能够从您可能需要的任何项目中访问它们。这样做有什么问题吗?全局安装的包不会添加到package.json文件中,那么既然不会添加到package.json中,那么为什么要安装全局安装呢?

使用Node.js和NPM能做的一个很棒的原因之一就是构建人们通常称之为“二进制文件”的东西,它们只是可以全局安装的脚本,因此可以从盒子的任何位置访问。这意味着您可以创建命令行工具并使用NPM来安装它们!

例如:ExpressJS(Node.js最受欢迎的Web框架之一)或mocha(非常流行的测试库)等软件包也附带了可以使用的可执行二进制文件。例如,mocha要求您在全局和本地安装它,以便拥有一个名为“mocha”的CLI工具,并能够在本地项目上运行测试。

全局包在需要添加到PATH环境变量的常规路径中创建符号链接(或快捷方式)。

NPM的经典命令

install命令只是您可以与NPM一起使用的众多命令之一。事实上,抛开近60种不同的命令(是的,就这么多!),我将简要介绍一下,NPM还允许你创建自己的自定义命令,以防止内置命令对你不够用。

以下是最常见的命令列表,取自官方文档

  • access设置已发布包的访问级别,限制或启用除作者之外的其他人的访问权限。例:$ npm access public
  • adduser将用户帐户添加到注册表(默认情况下,注册表是npm的注册表,但您可以指定自定义帐户)。例:$ npm addUser当提示时,将输入用户凭据(用户名和密码)及其电子邮件。
  • audit对已安装的依赖项运行安全审核,确保没有已知的漏洞影响它们(以及扩展,您的项目)。您甚至可以使用该标志fix自动修复在审核期间可能发现的任何问题。
  • bin显示当前项目的NPM bin文件夹。
  • bugs打开新浏览器窗口中的错误列表。关于这个命令的有趣的一点是,它试图猜测包的当前错误跟踪器,一旦找到它,它就会启动一个新的浏览器窗口。
  • cache虽然开发人员通常不会使用此命令,但它允许它们清除,验证或向NPM的缓存添加内容。在该缓存中,存储HTTP请求信息和额外包数据。通常这是由NPM直接处理并且对开发人员透明地工作,但是如果你看到一些奇怪的行为,特别是当在不同的包和它们的不同版本之间切换时,尝试清除缓存可能是个好主意(只是为了开启)安全的一面)。
  • ci几乎与npm install用于自动化环境(例如持续集成过程)相同。此命令比此命令更严格,install并确保安装始终是干净的(如果存在,它会自动删除node_modules文件夹)。
  • completion为npm及其子命令启用Tab Completion。阅读完整文档以获取更多详细信息。
  • config允许您设置,获取和编辑NPM的配置选项。
  • dedupe尝试通过遍历依赖关系树并在尽可能远的层次结构中移动重复的条目来减少依赖关系的重复。当您的应用程序开始增长并包含越来越多的模块时,这尤其有用。使用此命令绝对是可选的,但如果您有很多依赖项,它将在安装期间(在CI / CD环境中最有用)提供相当大的减少。
  • deprecate在库的注册表中为特定版本(或版本范围)添加弃用警告。
  • dist-tag帮助管理特定包的标签。标签可以充当版本别名,以帮助识别版本而无需记住数字。例如,默认情况下,最新标记用于所有库的最后一个版本,您只需运行npm install library-name@latest,NPM将了解要下载的库的哪个版本。
  • docs就像bug一样,这个命令试图猜测软件包的官方文档在哪里,并在本地浏览器中打开该URL。
  • doctor执行一组预定义的检查,以确保正在执行NPM的系统已准备好最低要求:nodegit命令是可访问和可执行的,node_modules文件夹(本地和全局)可由NPM,注册表写入或者它的任何自定义版本都是可访问的,最后,NPM缓存存在并且它正在工作。
  • help-search / help 帮助将显示给定术语的文档页面,如果没有找到结果,help-search将对NPM的markdown帮助文件执行全文搜索并显示相关结果列表。
  • hook允许您配置新的NPM挂钩,当对感兴趣的包进行更改时,它会通知自定义URL。例如,通过键入以下内容可以在发布新版ExpressJS时收到通知:反过来,您可以使用该信息执行任何您喜欢的操作(例如自动更新依赖项)。$npm hook add express http://your-url.com/new-express-version-endpoint
  • init通过询问一系列问题来帮助初始化项目,例如名称,版本,作者等。最后,package.json 使用该信息创建一个全新的文件。您还可以提供自定义初始化程序,以自定义处理到您的特定堆栈。
  • install安装新包。您可以指定程序包的位置及其格式(即,您只能提供一个名称,以便在主注册表中查找它,或者在下载要安装的程序包的tarball文件的路径中)。如果您不希望每次运行此命令时都安装最新版本,则还可以指定要安装的版本(对于自动环境(如CI / CD)尤其有用)。
  • ls列出当前项目的所有已安装软件包。您可以列出全局包或本地安装的包。在任何一种情况下,它不仅会列出package.json文件中可见的名称和版本,还会列出它们的依赖关系及其版本。
  • outdated检查项目中过时的包。它将为您提供已安装软件包的报告,其当前版本,package.json文件期望的版本以及主注册表中发布的最新版本。
  • owner允许您管理包所有者。如果您是图书馆所有者或维护者,这一点很重要,但如果您仅限于使用包,则不是这样。
  • ping ping当前配置的主npm注册表并测试身份验证。这仅在您下载或安装任何软件包时遇到问题。它只会帮助您解决部分问题,但重要的是要记住它。
  • prefix显示当前前缀,换句话说,显示最近文件夹中包含package.json文件的路径。您可以使用该-g标志,您将获得安装全局包的实际位置。
  • publish允许开发人员通过使用组和组织公开或私下与他人共享模块。

这些是您可以使用的最常见或最有用的NPM命令,但是仍然有超过10个额外的命令供您查看,因此我建议您将其文档添加为书签,并做一个注释以便返回并仔细检查它!

 

如何发布我自己的包

我要分享关于NPM知识的最后一点是与其他人分享你的工作是多么容易。在上一个列表中,最后一个命令是发布命令,它基本上允许你这样做,但在这里我想给你更多的细节。

准备项目的元数据

NPM的注册表本质上是一个巨大的包搜索引擎,能够同时托管所有内容,因此您不必同时索引它可以在您的工作中获得的每一点元数据,以帮助其他人找到您的模块尽快。

换句话说,请确保您package.json的设置正确。因为这些内容是吸引您(以及其他人)开始研究及分享您的包的主要因素。

  • Name:这是列表中最明显和最常见的,也是您在创建package.json文件以跟踪依赖关系时可能已经设置的名称。请注意它的唯一性。
  • Description:描述你的包,以便其他人可以快速了解他们在安装时会得到什么。并确保在描述中添加尽可能多的重要关键字,以便搜索引擎知道如何快速找到您。这是尝试找到您的软件包的开发人员的需求与引擎首先尝试正确索引的需求之间的平衡。
  • Tags:这是一个以逗号分隔的关键字列表。话虽这么说,一旦你开始发布包,这些标签就非常重要,因为在NPM的主站点上,它们可以作为你可以轻松浏览的类别。因此,如果您没有完善你package.json中的标签属性,其他开发人员将很难通过分类导航找到你的包。
  • Private:除非您只是自用,否则您需要尽快设置该属性为false,否则没有人能够通过关键字搜索找到您的模块。
  • Bugs:这确保如果您在某个地方托管了您的内容,例如存在公共问题跟踪的Github,则将此属性设置为正确的URL。这将帮助NPM显示链接并在包页面上显示当前打开的问题的数量。
  • Repository:不是严格要求的属性,但是如果你添加它,NPM将能够显示额外的信息,例如它的链接,活动,协作者列表,仅举几例。
  • Homepage:与前一个一样,它将帮助NPM显示指向此URL的单独链接(如果存在)。当您将代码放在一个URL(例如Github仓库)和专用于另一个URL中的模块的特定网站时,这尤其重要。
  • License:用于显示您在项目中设置的实际许可证。如果您将其添加为package.json文件的一部分,它将以不同且更突出的方式显示。您也可以在readme.md上提及它,但在此处添加它将为NPM提供有关您的项目的额外知识。

通过提供我上面提到的元数据,NPM能够展示这些数据并突出显示它供开发人员查看。以下示例为Winston的包页面:

 

 

 

由于其团队添加了元数据,添加了多少链接以及额外的位和详细信息。

一份优秀的文档

这步是可选的,但如果你的包是一个可供其他开发人员使用的模块的话,那么我建议你最好提供一份优秀的文档,供他人参考。

因为你真的不能指望你的工具“上手简单、易于理解”。NPM

的目的是为其他人提供一套帮助他们解决问题的预置工具。因此,请尽量丰富你的文档,吸引更多人来使用你的工具吧。

正式发布包

编码完成后,将有效的package.json放置到你的目录中并编写尽可能完善的readme.md文件,您就可以发布了。

要执行发布操作,您必须做两件事:

  1. 使用npm CLI 登录您的NPM帐户(如果您已经有了账号)。
  2. 发布您的代码。

也就是只需两步,就能简单的完成发布。登陆:

$ npm login

将提示您输入凭据,一旦您成功登录,您可以再输入:
$ npm publish

请在项目的文件夹中执行此操作,否则第二个命令将失败。

另外,请记住,包的名称将由您的package.json文件中的name属性给出,而不是来自文件夹的名称(通常二者都是相同的,但并这不意味着他俩有什么关系)。因此,如果您遇到重复的名称错误(考虑到NPM中已经有重名的包了),那么您就必须进行更改一个再次发布了。

结论

感谢阅读,我希望到现在为止,你已经了解了NPM的复杂性和美感。它不仅仅是一个安装软件包的简单工具,但如果你花时间检查文档,你可以用它做更多的事情。

转载于:https://www.cnblogs.com/powertoolsteam/p/11504262.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带你深入了解NPM——NPM初学者指南 的相关文章

  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 使用 google Directions API 的地图视图绘制方向 - 解码折线

    我正在尝试使用 Google 方向 API 在我的地图视图上显示方向 但我在从 JSON 响应获取数据时遇到困难 我可以获得 级别 和 点 字符串 但无法弄清楚如何将它们解码为地图上的点 任何帮助将非常感激 我有一个类可以为您解码它们 添加
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • 在 MySQL 中使用 COUNT 时如何返回 0 而不是 null

    我使用此查询返回存储在 sTable 中的歌曲列表以及存储在 sTable2 中的总项目数 SQL queries Get data to display sQuery SELECT SQL CALC FOUND ROWS str repl
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

随机推荐

  • 大规模部署lxc容器遇到的若干问题

    线程数控制 启动线程过多会导致资源不足引发的lxc start命令无法执行问题 到致大量容器只执行了lxc copy 而无法真正运行 具体情况应视服务器硬件条件 cpu 内存 在本项目部署中主要瓶颈在于cpu 以及当前服务器状态 当前主要是
  • Nginx Proxy Manger-反向代理神器-Docker一键部署

    Nginx Proxy Manger 反向代理神器 利用Docker实现一键部署 Lunix发行版 推荐使用Debian 10 或者 Ubuntu 20 04或更高版本 Nginx Proxy Manger 是一个反向代理管理系统 它基于
  • vuex存储保存数据、使用数据,超详细解说

    之前的项目中使用过一次vuex搭配localstorage存储token 使token持久化保存 好长时间不用 又把vuex的使用忘的一干二净 重新百度搜索 自己尝试后实现需求 我的业务需求是父页面中嵌套了一个子页面 父页面的一个卡片列表区
  • k8s job机制初探

    博客作为学习笔记记录 若有理解或表述错误 欢迎指出 k8s的job机制 k8s官网参考 k8s的job是用来执行一次性任务的一类资源 相关的还有cronjob 用于执行以下周期性任务 部署job之后 k8s会起对应pod 当pod的状态为f
  • Python- 文件处理

    os path splitext file 0 获取文件名 file endswith c 用于检查一个文件名 存储在变量 file 中 是否以 c 结尾 如果是这样 那么它可能是一个 C 语言源代码文件 接下来 os path split
  • float类型做比较

    public class tst private float a 3 0f private float b 0 0f private float c 4 0f private float d 0 0f public void floatCo
  • 软件工程专业如何论文选题?

    Ladies and gentlemen 写论文可谓是读书阶段最为关键的一环 你们是否还记得被论文折磨的日日夜夜 最可怕的不是导师催促你时铁青的面容 而是眼看着DDL Deadline 来临 你的论文题目却让你一筹莫展 作为一个硕士毕业没多
  • 下载和编译 Chrome 时遇到的问题

    下载代码前最基本的代理设置 https blog csdn net siyu77 article details 50916320 对于 ShadowSocks 代理 https proxy 也要设置成 http localhost 108
  • QtextBrowser打印数据不能实时显示的问题

    在编写程序的时候需要从外部读取txt文件的数据打印到QtextBrowser文本框中 但是发现数据是卡一下然后一起出来 而不是一行一行地实时显示 编程环境是vs2017编译器下的集合qt插件的C 界面编程 原来的程序段如下 ui datao
  • 每日十道算法

    最近发现了一个挺厉害的人工智能学习网站 内容通俗易懂 风趣幽默 感兴趣的可以点击此链接进行查看 床长人工智能教程 废话不多说 请看正文 1 两个数组的交集 给定两个数组 编写一个函数来计算它们的交集 时间复杂度 O n 空间复杂度 O n
  • sqoop的在hadoop上的安装和使用

    1 解压安装包 tar zxvf sqoop 1 4 6 cdh5 14 2 tar gz 解压文件夹 mv sqoop 1 4 6 cdh5 14 2 soft sqoop146 移动文件夹到文件目录下 cd opt soft sqoop
  • python爬虫遇到 raise SSLError(e, request=request) requests.exceptions.SSLError: HTTPSConnectionPool

    python爬虫遇到ssl证书报错 host port 443 Max retries exceeded with url Caused by SSLError SSLCertVerificationError 1 SSL CERTIFIC
  • Lua调用C#的底层原理

    前言 Lua是一种轻量级的脚本语言 被广泛应用于游戏开发 嵌入式系统和其他需要快速开发和灵活性的领域 而C 是一种面向对象的编程语言 是微软开发的 NET平台的一部分 主要用于Windows应用程序开发 对啦 这里有个游戏开发交流小组里面聚
  • 新版nonebot,go-cqhttp搭建qq机器人保姆级教程

    前言 前段时间QQ进行了更新 所以导致了非手表协议扫码登陆报错的问题 不过好在大佬已经推出rc5版本的go cqhttp 解决了这一头疼的问题 在开始之前 我需要说明一下 本文章是针对没有经验和基础的用户 所以说篇幅可能会长一点 开始 1
  • C++栈区、堆区、全局静态区、代码区的介绍

    示例代码 include
  • elasticsearch 配置 之 discovery.zen.ping.unicast.hosts

    discovery zen ping unicast hosts 192 168 1 12 192 168 1 12 9201 192 168 1 12 9202 192 168 1 13 192 168 1 14 注 端口非9200的节点
  • C语言的运算符及优先级

    C语言的运算符包括单目运算符 双目运算符 三目运算符 优先级如下 第1优先级 各种括括号 如 等 成员运算符 第2优先级 所有单目运算符 如 等 第3优先级 算数运算符 乘法运算符 除法运算符 求余运算符 第4优先级 算数运算符 加法运算符
  • githubC++ 技术方向基础知识总结

    简介 面向 C C 技术方向校招求职者 初学者的基础知识总结 包括语言 程序库 数据结构 算法 系统 网络 链接装载库等知识及面试经验 招聘 内推等信息 github 传送门
  • spring学习笔记(十二)Spring注入内部Bean

    Java 中在类内部定义的类称为内部类 同理在 Bean 中定义的 Bean 称为内部 Bean 注入内部 Bean 使用
  • 带你深入了解NPM——NPM初学者指南

    前段时间 我们邀请了我们 城内 葡萄城 资深开发工程师刘涛为大家分享了一次干货满满的关于Electron线上公开课 在课程过程中有不少同学对于NPM的概念和用法有一些疑问 所以这次我们希望通过这篇文章来解答各位同学的问题 另外在介绍的基础上