什么是npm

npm是nodejs的包管理器,在当今工程化前端开发过程中,npm包起着举足轻重的作用。

安装npm

作为nodejs的包管理器,npm随着nodejs一起安装的。通常情况下,当我们安装完成nodejs以后,npm也就随之安装了。

如果要更新npm,可以使用如下命令:

npm install npm -g

npm镜像

npm提供了官方的镜像管理仓库: 官方仓库,如果我们要使用某个库文件,可以在这个网站上面进行查找,然后使用npm进行安装。

由于国内的网络环境,通常我们会设置淘宝的镜像,设置方法:

npm config set registry https://registry.npm.taobao.org

要查看设置了哪些参数,使用命令:

npm config ls

从中可以看到配置文件的地址:C:\Users\Administrator\.npmrc

使用npm安装包

初始化配置文件

在使用npm之前,要先初始化npm的配置文件,使用如下命令:

npm init

这个时候会出现一个初始化的引导命令行,让你输入项目名称、版本号、作者、协议等,如果你觉得这些输入起来麻烦,可以添加参数来使用默认值:

npm init --yes

使用以上命令,会在当前目录生成package.json。下面是这个默认配置文件的注释:

{
"name": "demo1", //名称
"version": "1.0.0", //版本号
"description": "", //描述
"main": "index.js", //入口文件
"scripts": { //脚本,key-value格式,可以使用 npm run xxx
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //关键字
"author": "", //作者
"license": "ISC" //协议
}

包版本号

npm包的版本命名格式为: major.minor.patch

  • major: 主版本号,新的架构调整,不兼容老版本
  • minor: 次版本号,新增功能,兼容老版本
  • patch: 修补版本号,修复bug,兼容老版本

当我们安装一个包之后,可以看到包名的前面有一些符号,例如 ^~等,这些符号决定了当前项目依赖的包的版本号如何选择

  • 没有符号,例如1.2.5,表示必须依赖1.2.5版
  • ~:大概匹配某个版本,如果minor版本号指定了,那么minor版本号不变,而patch版本号任意,如果minor和patch版本号未指定,那么minor和patch版本号任意。

例如:

如:~1.1.2,表示>=1.1.2 <1.2.0,可以是1.1.2,1.1.3,1.1.4,.....,1.1.n
如:~1.1,表示>=1.1.0 <1.2.0,可以是同上
如:~1,表示>=1.0.0 <2.0.0,可以是1.0.0,1.0.1,1.0.2,.....,1.0.n,1.1.n,1.2.n,.....,1.n.n
  • ^:兼容某个版本,版本号中最左边的非0数字的右侧可以任意,如果缺少某个版本号,则这个版本号的位置可以任意

    例如:
如:^1.1.2 ,表示>=1.1.2 <2.0.0,可以是1.1.2,1.1.3,.....,1.1.n,1.2.n,.....,1.n.n
如:^0.2.3 ,表示>=0.2.3 <0.3.0,可以是0.2.3,0.2.4,.....,0.2.n
如:^0.0,表示 >=0.0.0 <0.1.0,可以是0.0.0,0.0.1,.....,0.0.n

其它的一些写法:

  • >:必须大于某个版本,如:>1.1.2,表示必须大于1.1.2版
  • >=:可大于或等于某个版本,如:>=1.1.2,表示可以等于1.1.2,也可以大于1.1.2版本
  • <:必须小于某个版本 ,如:<1.1.2,表示必须小于1.1.2版本
  • <=:可以小于或等于某个版本,如:<=1.1.2,表示可以等于1.1.2,也可以小于1.1.2版本
  • x-range:x的位置表示任意版本,如:1.2.x,表示可以1.2.0,1.2.1,.....,1.2.n
  • *-range:任意版本,""也表示任意版本,如:*,表示>=0.0.0的任意版本
  • version1 - version2:大于等于version1,小于等于version2,如:1.1.2 - 1.3.1,表示包括1.1.2和1.3.1以及他们件的任意版本
  • range1 || range2:满足range1或者满足range2,可以多个范围,如:<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 ️.0.0,表示满足这3个范围的版本都可以

scripts

scripts节点下配置的是可以运行的脚本。例如在默认配置中的test脚本,我们可以通过下面的命令来调用:

npm run test

如果我们要添加其它脚本,可以在scripts节点添加键值对:

"scripts": {          //脚本,key-value格式,可以使用 npm run xxx
"test": "echo \"Error: no test specified\" && exit 1",
"dir": "dir" //windows下显示当前目录文件列表
}

然后使用npm来运行该脚本:

npm run dir

这里只是为了演示scripts脚本的用法,它的作用是为了减轻我们在开发时的重复工作。再举个例子,例如使用webpack打包,可以使用命令npx webpack --mode=production,如果我们每次都使用完整的命令,会显得很繁琐,此时我们可以定义一个脚本来简化操作:

"scripts": {          //脚本,key-value格式,可以使用 npm run xxx
"test": "echo \"Error: no test specified\" && exit 1",
"dir": "dir", //windows下显示当前目录文件列表
"build": "npx webpack --mode=production"
}

在我们开发的时候,直接使用npm run build命令即可。

dependencies 和 devDependencies

顾名思义,dependencies 是依赖的包,devDependencies 是开发时依赖的包。例如我们项目中用到了jQuery,很显然这是项目运行时需要的,那么在添加包时,使用如下命令进行安装:

npm install jquery

而对于webpack等在开发时用于构建项目的包,我们仅在开发时用到,项目运行时不会使用,因此需要把它们添加到开发依赖中,添加方法如下:

npm install webpack --save-dev

# --save-dev 可以简写为 -D,简化后的命令如下:
npm install webpack -D

package.lock.json

我们在安装包时,可以看到它的版本依赖,默认是兼容大版本即可。此时会出现一个问题,就是在不同的用户电脑中,初始化的包的版本可能会出现不一样的情况,从而造成未可知的bug。为了解决这个问题(这也是yarn诞生的一个原因),npm在5.0之后引入了package.lock.json文件,用来固定包的版本、包的源地址等信息,保证在不同的用户开发环境中加载的是相同的包。

当用户使用npm install命令来安装我们的依赖项时,会从package.lock.json文件中进行安装。官方文档:package.lock.json

安装包

当我们从别人的源代码初始化安装所有依赖的包时,使用如下命令:

npm install

当我们为项目添加新的包时,使用如下命令:

# 安装包
npm install webpack --save # 上面命令的参数 --save 为默认选项,可以忽略,因此可以简化为:
npm install webpack # 全局安装
npm install webpack -g # 安装到开发依赖
npm install webpack -g --save-dev # 上面这行命令还可以简写为下面这一行
npm i webpackage -g -D

安装特定版本的包:

npm install webpack@5.50.0

从指定的源安装包:

npm install -g cnpm --registry=https://registry.npm.taobao.org

NPM使用方法的更多相关文章

  1. 本地项目的npm安装方法

    有些node项目如一些工具类的项目,安装以后通过命令行执行其功能.但是而对于本地自建的项目如何通过npm安装,然后通过命令行(项目定义了命令行)工具执行命令调用其功能呢? 对于这种情况,笔者主要通过两 ...

  2. npm更新方法

    今天npm的版本更新发现小于3.0 尝试了npm install npm -g 安装么有成功换成了 cnpm install npm -g安装之后就可以

  3. Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法

    S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...

  4. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

  5. pyharm 上运行 npm 配置方法

    问题解决.

  6. 关于npm无法安装依赖包以及安装包缓慢的解决方法

    因为npm的服务器在国外,导致我们使用npm安装第三方包缓慢.而且有的第三方包是被墙的. 因此,作为墙内人,必须解决这个问题,否则开发起来实在是太坑了! 推荐大家使用淘宝的镜像(cnpm),它以每10 ...

  7. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  8. nodejs中npm常用命令

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

  9. (转)nodejs中npm常用命令

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

随机推荐

  1. Tomcat和Servlet简析

    目录 Servlet Tomcat 参考 Servlet Servlet通常指我们继承了Servlet接口的类,我们开发Servlet时一般就是继承HttpServlet重写它的doGet.doPos ...

  2. [Kong] basic-auth基本认证及ACL鉴权

    目录 basic-auth 1. Route上启用插件 2. 创建一个Consumer 3. 为Consumer创建凭证 4. 验证凭证 ACL 用户鉴权 1. 在route上启用ACL鉴权插件 2. ...

  3. python 16篇 多线程和多进程

    1.概念 线程.进程 进程 一个程序,它是一组资源的集合 一个进程里面默认是有一个线程的,主线程 多进程是可以利用多核cpu的线程 最小的执行单位 线程和线程之间是互相独立的 主线程等待子线程执行结束 ...

  4. python根据正则表达式生成指定规律的网址

    import os def file_name(file_dir): for root, dirs, files in os.walk(file_dir): print(root) #当前目录路径 p ...

  5. 从sql2008导入表结构及数据到mysql

    打开navicat for mysql连接mysqlcreate database lianxi刷新,双击lianxi,双击"表"点击右边的"导入向导"选择&q ...

  6. java课堂考试总结

    9月22日,进行了开学第一堂的java测试,来检验暑假的自学成果.下午的考试中,时间应该是比较充分的,但是我还是有许多功能模块没有完成,功能缺少,在进行测试的时候暴露出了许多漏洞. 总结一下,在暑假的 ...

  7. 求数组的子数组之和的最大值III(循环数组)

    新的要求:一维数组改成循环数组,只是涉及简单算法,只是拿了小数做测试 想法:从文件读取数组,然后新建数组,将文件读取的数组在新数组中做一下连接,成为二倍长度的数组,然后再遍历,将每次遍历的子数组的和存 ...

  8. Day8 方法详解及递归思想.

    何为方法 Java方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 设计方法的原则: 方法的本意是功能块,就是实 ...

  9. P6982 [NEERC2015]Jump

    P6982 [NEERC2015]Jump 题意 给你一个未知的 01 串,每次可以输出询问一个 01 串,如果该串中正确的个数刚好等于 \(n\) 或者 \(n/2\) ,将会返回相应的答案,否则会 ...

  10. 01_Nginx下载安装

    一.简介 Nginx 是由俄罗斯人 Igor Sysoev 设计开发的,开发工作从2002 年开始,第一次公开发布在 2004 年 10 月 4 日. 官方网站为:http://nginx.org/ ...