您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

npm简介

时间:2021-04-15 11:16:31  来源:今日头条  作者:编程实践
npm简介

 

做前端开发,如果项目达到了一定的规模,就离不开npm了。

下面简单介绍一下npm的知识。

1、npm的含义

npm,Node Package Manager的缩写,也就是“节点的包管理器”。

顾名思义,npm是一个软件包管理器,主要进行JAVAScript的包管理。通过npm,我们可以很方便地进行JavaScript包的下载、升级,我们也可以把我们开发的JavaScript包共享给其他使用者。

我们可以简单地把npm当成一个JavaScript语言的Maven,使用起来非常方便。

2、npm与Node.js的关系

如果你是一个初学者,你会发现:我们使用npm之前,必须安装Node.js;当我们安装完Node.js之后,我们几乎不使用Node.js,只使用其中的npm。

进一步细思,你就能得出结论:npm好像和Node.js没啥关系!

确实,npm和Node.js原本是没啥关系的:

(1)最初,npm和Node.js是不同的作者开发的;

(2)也许,你会认为npm的第一个字母是Node,名字来源于Node.js;可是,Node.js最初的名字却是Web.js。

npm在Node.js中提供,完全是市场因素。

npm开发出来后,它的作者Isaaz曾经联系过jQuery、Bootstrap的作者,希望他们提交自己的软件包给npm进行管理,但是jQuery、Bootstrap的作者不理睬。

于是Isaaz联系Node.js的作者,当时Node.js并不火,而且缺一个包管理器,二者一拍即合,并且Node.js愿意将npm集成进来,npm成为Node.js的一个组件。

从此,Node.js和npm相互扶持,让Node.js火遍全球,也让npm的用户不断增多,目前npm管理了60万个软件包,平均每天有上亿次下载,曾经对npm爱理不理的jQuery、Bootstrap也加入到了npm。

3、npm的组成

npm由三个独立的部分组成:

网站:即npmjs官网,我们可以直接访问

注册表(registry):是一个保存软件包的数据库

命令行工具 (CLI):CLI是Command Line Interface的缩写,即命令行接口的缩写,程序员一般通过CLI使用npm。

4、npm的安装

由于现在npm是Node.js的一个组件,我们只要在网上下载Node.js,并进行安装,即可得到npm。

5、npm的版本查询

在命令行下,执行npm -v命令,即可查询npm的版本:

npm简介

 

6、使用npm安装一个模块

(1)全局安装,使用下面的命令:

npm install <Module Name> -g

模块安装在Node.js目录中,可以直接在命令行下使用。

(2)本地安装,使用下面的命令:

npm install <Module Name>

在当前路径下安装模块,安装后,模块放在当前路径的node_modules子目录中。

7、如何对npm自身升级

对npm自身升级,使用下面的命令:

npm install npm -g

从命令行来看,就是使用npm命令,安装全局的npm。

npm简介

 

8、开发中常用的没有参数的npm install的含义

我们使用Vue进行前端开发时,经常使用没有参数的npm install命令,例如:

npm简介

 

这个命令我们常常在建立Vue工程后使用,功能是读取当前目录中的package.json文件,然后下载其中要求的模块到node_modules子目录中。

说明:我们在建立Vue工程时,会生成package.json文件,这是package.json文件的相关内容:

npm简介

 

9、如何解决国内npm下载缓慢的问题

阿里巴巴公司提供了cnpm,该工具和npm的使用方法一模一样,但是注册表在国内,因此下载比较快。cnpm使用npm进行安装,命令如下:

npm install -g cnpm --registry=<阿里巴巴的cnpm注册表url>

上面的命令中,“阿里巴巴的cnpm注册表url”是:在“registry.npm.taobao.org”前面加上“https”前缀,生成的url。

命令执行完成后,可以用cnpm进行各种操作。

10、查看安装的所有模块

查看全局安装的所有模块,使用npm list -g命令:

npm简介

 

查看本地安装的所有模块,在本地目录中,执行npm list命令:

npm简介

 

11、npm run命令

在我们开发中,常常使用npm run serve来启动服务:

npm简介

 


npm简介

 

命令执行后,我们就可以通过浏览器查看开发的前端程序。

我们执行npm run serve命令后,npm在当前路径的package.json文件中查找命令脚本,然后执行命令脚本。这是一个package.json文件的脚本命令部分:

npm简介

 

可以看到,文件定义了serve、build、lint三个脚本命令。

npm的知识还有一些,但是了解上面的知识,就可以进行初步的Vue前端开发了。



Tags:npm   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
错误信息如下:cnpm : 无法加载文件 D:\work\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170...【详细内容】
2021-09-01  Tags: npm  点击:(72)  评论:(0)  加入收藏
做前端开发,如果项目达到了一定的规模,就离不开npm了。下面简单介绍一下npm的知识。1、npm的含义npm,Node Package Manager的缩写,也就是“节点的包管理器”。顾名思义,npm是一...【详细内容】
2021-04-15  Tags: npm  点击:(381)  评论:(0)  加入收藏
前端框架1.ReactReact 使用虚拟 DOM 将页面中的各个部分作为单独的组件进行管理,因此您可以只刷新该组件而非整个页面。React 经常配合 React-dom 与 React-router-dom 一同...【详细内容】
2020-10-15  Tags: npm  点击:(95)  评论:(0)  加入收藏
命令行:npm install -g typescript 新建一个TypeScript文件,粘贴如下内容:function greeter(person) { return "Hello, " + person;}var user = "Jane User";document.bod...【详细内容】
2020-08-20  Tags: npm  点击:(132)  评论:(0)  加入收藏
看到一个面试题,原生小程序中api的调用,都是回掉函数,怎么处理成优雅的链式调用呢?那肯定是通过promise 封装起来啊,怎么封装呢?很简单,代码如下/** * * promisify化api * * @param...【详细内容】
2020-03-05  Tags: npm  点击:(93)  评论:(0)  加入收藏
npm 包管理器npm is a package manager that comes bundled with Node. Contrary to popular belief npm is not an acronym. According to the npm FAQ It provides an eas...【详细内容】
2019-09-25  Tags: npm  点击:(152)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条