Npm包管理工具的下载、安装、发布等使用详解

Npm

NPM的全称是N ode P ackage Manager

是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

JavaScript运行时环境Node.js默认包管理器
2020年3月17日,Github宣布收购Npm,GitHub现在已经保证Npm将永远免费。

Npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。

它是世界上最大的软件注册表,截至2020年3月17日,npm为大约1200万开发人员提供了130万个软件包,这些开发人员每月下载这些软件包达750亿次。

来自各大洲的开源软件开发者使用 Npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

Npm官网www.npmjs.com

Npm中文网www.npmjs.cn

一、关于Npm

1、Npm 由三个独立的部分组成:

  • (1)网站 https://npmjs.com ,是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径
  • (2)注册表(registry),是一个巨大的数据库,保存了每个包(package)的信息
  • (3)命令行工具(CLI)) https://docs.npmjs.com/cli/npm ,是通过命令行或终端运行。开发者通过 CLI 与 npm 打交道

2、Npm常用命令:

命令 注释
npm -v 显示版本,检查npm 是否正确安装
npm install -g npm to update 更新升级npm
npm init 项目名 创建项目 手动填写配置信息
npm init 项目名 -y 创建项目并自动生成配置信息
npm list 显示当前项目中已安装模块
npm list -g 显示所以已安装模块
npm root 显示当前项目 node_modules目录
npm root -g 显示全局node_modules目录
npm show 模块名 显示当前项目模块详情
npm update 升级当前目录下的项目的所有模块
npm update 模块名 升级当前目录下的项目的指定模块
npm install 模块名 安装模块(局部安装)
npm install -g 模块名 全局安装模块
npm install 模块1 模块2... 同时安装多个模块,中间用空格隔开
npm cache clean --force 清除npm缓存
npm update -g 模块名 升级全局安装的模块
npm uninstall 模块名 删除指定的模块
npm config list 显示npm相关信息

3、使用Npm安装模块(包)

  • 安装命令:

    shell 复制代码
    npm install 模块名
    或 
    npm i 模块名 # 注:install 可以简写为 i; 例如:npm i jquery
  • 安装到开发依赖devDependencies

    开发依赖就是,不用打包(构建)到生产环境的依赖模块,只在开发环境使用的【如 less、sass、eslent等】

    安装时需要添加 --save-dev 参数,或用简写参数 -D

    shell 复制代码
    # 例如
    npm i jquery --save-dev 
    或
    npm i jquery -D
  • 安装到运行依赖dependencies

    运行依赖就是,无论在开发、生产环境都需要打包(构建)的依赖模块,【如 vue、axios等】

    安装时可以不用加参数,如果要加就用 --save 或用简写参数 -S

    shell 复制代码
    # 例如
    npm i jquery
    
    # 如果要加
    npm i jquery --save
    或
    npm i jquery -S

4、删除全局 node_modules 中的模块

  • 删除命令:

    shell 复制代码
    npm uninstall 模块名
  • 先删除和 node_modules 同级目录中的模块名文件 如:cnpm

  • 再删除和 node_modules 同级目录中的模块名.cmd文件 如:cnpm.cmd

  • 然后在删除 node_modules 里面的模块文件夹 如:cnpm

注:node_modules 查找规则(向上查找)

  • 查看全局的node_modules目录:npm root -g

  • package.json配置文件中保存了node_modules目录中的各个模块、版本号等信息。

  • 可以在一个大目录下创建package.json,然后安装各种所需模块,生成node_modules目录。

  • 在子目录中各自创建的项目,可以共用一个node_modules目录中的模块。

  • 在子目录项目中正常引用模块,模块会自动向上查找node_modules目录中的模块。

  • 无论是发布模块 还是 删除包 都要保证 npm下载源是官方的下载源才行哦!!

5、依赖包版本号前面的 ^ 或者 ~ 或者* 的符号的含义

由于版本号的影响,所以会造成版本不统一的情况

npm是围绕着语义版本控制的思想而设计的

如:"md5": "^2.1.0" 表示:主版本号.次版本号.补丁版本号

主版本号 : 当API发生改变,并与之前的版本不兼容的时候 次版本号 : 当增加了功能,但是向后兼容的时候 补丁版本号: 当做了向后兼容的缺陷修复的时候

  • ^ 会匹配最新的大版本依赖包,比如 ^1.2.3 会匹配所有 1.x.x 的包,包括 1.3.0,但是不包括 2.0.0

  • ~ 会匹配最近的小版本依赖包,比如 ~1.2.3 会匹配所有 1.2.x 版本,但是不包括 1.3.0

  • ***** 安装最新版本的依赖包,比如 *1.2.3 会匹配 x.x.x

    在package.json中的 dependenciesdevDependencies配置项:

    shell 复制代码
    "dependencies": {
    	"md5": "^2.1.0" # ^ 表示如果直接npm install 将会安装  md5  2.*.*的最新版本
    }
    "dependencies": {
    	"md5": "~2.1.0"	# ~ 表示如果直接npm install 将会安装 md5 2.1.* 的最新版本
    }
    "dependencies": { 
    	"md5": "*"      # * 表示如果直接npm install 将会直接安装 md5的最新版本
    }

    那么该如何选择呢?

    当然你可以指定特定的版本号,直接写1.2.3,前面什么前缀都没有,这样固然没问题。

    但是如果依赖包发布新版本修复了一些小bug,那么需要手动修改package.json文件;~ 和 ^ 则可以解决这个问题。

    但是需要注意 ^ 版本更新可能比较大,会造成项目代码错误,所以 建议使用 ~ 来标记版本号,这样可以保证项目不会出现大的问题,也能保证包中的小bug可以得到修复。

    版本号写 *,这意味着安装最新版本的依赖包,但缺点同上,可能会造成版本不兼容,慎用!

6、设置镜像源 或 使用CNPM淘宝镜像

由于npm 是国外的,网速不好,所以可以通过设置国内的镜像源 或CNPM 淘宝镜像来提升下载速度,它们的同步频率目前为 10分钟 一次以保证尽量与Npm官方服务同步。

  • 设置下载源 【推荐】

    • 查看npm下载源

      shell 复制代码
      npm get registry
      或
      npm config ls -l
      或
      npm config list
    • 将下载源设为Npm官方源

      shell 复制代码
      npm config set registry https://registry.npmjs.org
    • 将下载源设为淘宝源

      这是一个完整 npmjs.com 镜像,你可以用此代替官方版本(只读),我们将尽量与官方服务实时同步 。 我们的前后端应用代码均已开源,前端应用为 cnpmweb

      shell 复制代码
      npm config set registry https://registry.npmmirror.com

      shell 复制代码
      npm config set registry https://registry.npm.taobao.org 
  • 安装cnpm淘宝镜像:

    注:在全局安装好cnpm淘宝镜像后,在项目开发时要安装Npm包就直接用 cnpm install ... 而不是用npm命令了!!

    shell 复制代码
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    • cnpm 的用法和 npm的用法一样的

    • cnpm的下载速度比npm的快

二、发布Npm模块(包)

也就是向https://npmjs.com提交自己的模块!

1、创建package.json模块管理文件

注:模块名一定是在 Npm仓库中是唯一的才行哦!

模块名:就是package.json配置文件中的配置项 "name": "模块名"

sh 复制代码
# 创建package.json模块管理文件命令
npm init 
# ...根据提示输入相关信息,按回车Enetr键,到下一步,完成后会自动生成package.json文件啦!!

2、注册npm账号(已有账号此步略过)

注册网址:www.npmjs.com/signup

3、检查配置、切换到Npm官方源

  • 注:package.json中的name不能是已存在的包名
  • 注:package.json中的version不能是已存在的版本
  • 注:Npm的源地址必须是registry.npmjs.org
sh 复制代码
# 查看config配置命令,registry = "https://registry.npmjs.org"
npm config ls

# 切换到Npm官方源命令
npm config set registry https://registry.npmjs.org

4、添加 或 登录用户(已登录此步略过)(registry.npmjs.org)

shell 复制代码
# 查看当前登录的用户
npm whoami

# 添加 或 登录用户
npm adduser 或 npm login
   - Username:# 输入账号
   - Password:# 输入密码
   - Emali:# 输入邮箱

5、发布Npm包

完成以上步骤后,直接执行如下发布命令就OK了!

shell 复制代码
# 发布npm模块命令
npm publish 

6、发布包的 命名空间

为了防止发布npm模块名和其他已发布的npm模块名冲突,可以通过创建命名空间的方式来解决。

语法格式:@命名空间/模块名

  • 在package.json中的name项:

    { "name": "@muguilin/alert

    sh 复制代码
    # 发布npm模块命令 注:如果后面不加 --access public 表示发布私有模块(私有是需要付费的哦!!)
    npm publish --access public
    
    # 或者在package.json中添加"private": false 配置项就不用加--access public了
    npm publish

三、删除已发布的Npm包

1、登录用户(已登录此步略过)

shell 复制代码
npm whoami	# 查看当前登录的用户

2、删除已发布的Npm模块

  • 例如删除jquery包的命令:

    shell 复制代码
    npm unpublish jquery --force

    注:删除后24内不能在用这个模块名,再进行发布哦!!

四、在云服务器上配置和使用 Npm

1、配置 npm

npm 是 Node.js 的包管理和分发工具。它可以让 Node.js 开发者能够更加轻松的共享代码和共用代码片段下载 node 的压缩包中已经包含了 npm , 我们只需要将其软链接到 bin 目录下即可。

shell 复制代码
ln -s /usr/local/node-v6/bin/npm /bin/npm

2、配置环境变量

将 /usr/local/node-v6/bin 目录添加到 $PATH 环境变量中可以方便地使用通过 npm 全局安装的第三方工具。

shell 复制代码
echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile

3、生效环境变量

shell 复制代码
source /etc/profile

4、在云服务器上长时间(即便是关闭命令窗口工具)运行Node服务。

forever是一个简单的 CLI 工具,用于确保给定脚本连续运行(即永远运行)连续运行Node脚本

Npm地址:forever - npm (npmjs.com)

shell 复制代码
# 全局安装(方便在其他地方使用)
npm install forever -g 

# 启动Node服务
forever start app.js 	# 注:这里的app.js是要在云服务器上长时间运行的Node服务文件,根据你自己的Node服务文件名来启动!

五、其他管理器

  • Pnpm pnpm.io

    Pnpm 是一个和Npm类似的,快速、节省磁盘空间的包管理器,说是比 Npm 还要快 2 倍!但目录主流还是Npm包管理器。

    安装Pnpm:

    pnpm.io/installatio...

  • Bower bower.io

    Bower是Twitter推出的,它主要是一个包管理工具【前端套件管理】,它依赖 Node.js和Npm,简单来说就是一个静态资源共享平台。可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

    一般来说在前端开发工作中,或多或少会用到一些依赖包,以前的开发人员如果要用的话,就得到网上到处找,然后下各种插件,极大浪费了时间,并且删除的时候也麻烦。

    Bower 可以管理包含 HTML、CSS、JavaScript、字体甚至图像文件的组件。Bower 不会连接或缩小代码或执行任何其他操作 - 它只是安装您需要的包的正确版本及其依赖项。

    Bower的安装和升级全都依赖于NPM!

    安装Bower:

    shell 复制代码
    npm install -g bower

六、其他相关工具

  • Nvm

    下载地址:Releases · coreybutler/nvm-windows · GitHub

    Nvm的出现就是为了解决以上问题的,Nvm是一个Node.js版本管理器 ,为了解决Node各种版本存在不兼容问题,Nvm其实是让你在同一台机器上根据需要,安装 或 切换项目所对应的Node版本来适配项目。

    安装Nvm:

    nvm安装,nvm的使用,nvm常用命令,nvm安装node报错,nvm切换不了,等系列集合 - 掘金 (juejin.cn)

  • Yarn

    下载地址:classic.yarnpkg.com

    Yarn 会缓存它下载的每个包,因此它永远不需要再次下载相同的包。它还同时执行几乎所有操作,以最大限度地提高资源利用率。这意味着比Npm的安装速度更快。

    Yarn 在执行其代码之前使用校验和来验证每个已安装软件包的完整性。

    安装Yarn:

    shell 复制代码
    npm install -g yarn

    使用yarn 命令来代替npm 命令

    shell 复制代码
    # 如:用yarn 命令来安装 或 卸载模块
    
    # 安装:
    yarn add vue --save 
    yarn add vue -S
    
    yarn add vue --save-dev
    yarn add vue -D
    
    yarn global add vue # 全局安装
    
    # 卸载:
    yarn remove vue
    
    yarn global add vue # 全局卸载
    
    
    # 如:用yarn 命令来启动、打包项目
    yarn dev
    yarn serve
    yarn start
    
    yarn build
    yarn build-only
相关推荐
轻口味34 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami37 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习(三)
前端
User_undefined2 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app