npm了解与使用

kingarst

已于 2022-04-28 19:41:10 修改

阅读量1.8k

点赞数

分类专栏： # 工具文章标签： node.js npm

于 2022-04-27 22:54:27 首次发布

本文链接：https://blog.csdn.net/weixin_44152684/article/details/124462834

版权

工具专栏收录该内容

9 篇文章 1 订阅

订阅专栏

npm

npm 全称 Node Package Manager(node 包管理器)，它的诞生是为了解决 Node 中第三方包共享的问题。
npm 不需要单独安装。在安装Node的时候，会连带自动安装npm。
npm -v检查安装的情况。
官网

当我们谈到npm时，我们在说两个东西：

命令行工具。这个工具在安装node时，已经自动安装过了，不需要额外安装。
npm网站。这是一个第三方模块的"不花钱的模块超市"，我们可以自由地下载，上传模块。

不花钱的模块超市

npm网站收集了前端的各种工具. 之前学习过：

jQuery, bootStrap, flexible.js, arttemplate.js, layui.js, echarts.js........

你是如何下载的？官网下载?

有没有一个想法：在一个地方下载所有的库(模块.....)

包（package）与模块关系

npm网站上去下载我们的需要的代码时，它们是以"包"这种结构放在npm网站上的。先来了解下包和模块的关系。

nodejs中一个模块就是一个单独的js文件
Node.js 中的第三方模块，又叫做包、第三方包、依赖包
包是多个模块的集合。一个模块的功能比较单一，所以一个包一般会包含多个模块。
npm 管理的单位是包。类似于网站和网页的区别：一个网站一般会包含多个网页。

找自己需要的包

npm 公司提供了一个非常著名的搜包网站：https://www/npmjs.com/。它是全球最大的第三方包共享平台。

小结

npm中的第三方模块是以______的格式放在的npm网站上的，供程序员______下载

一个包内部可能会有______个模块

npm下载使用包

目标

掌握下载包的使用方式，了解dayjs的基本使用

步骤

分成三步：

初始化项目。npm init 如果之前已经初始化，则可以省略。
安装包。 npm install 包名。[注意：保持联网的状态哈]
引入包，使用

第一步：初始化项目

这里提到的项目并不是某个具体的功能，只是要创建一个空文件夹即可（注意，不要起中文名字哈）。

进入到项目所在的根目录下，启动小黑窗（建议：按下shift键，点击右键，在弹出的菜单中选择 “在此处打开命令行”）

输入如下命令：

npm init --yes
// --与yes之间没有空格， -- 与init之间有空格
// 或者是 npm init -y

init命令用来在根目录下生成一个package.json文件，这个文件中记录了我们当前项目的基本信息，它是一切工作的开始。

第二步：安装包

npm 这个超市中有现成的写好的代码，我们想下载来用，这个过程就是安装包，或者叫下包、装包

安装命令: npm i 包名

根据我们遇到的实际问题，我们来引入相应的包来解决它们。例如，我们在开发一个项目，其中涉及一些对日期时间的处理可以安装dayjs包。

安装day.js包

day.js是一个专门用来处理日期时间的一个包

主页地址：Day.js中文网

安装命令：npm install dayjs

第三步：使用包

当我们已经下载好一个包之后，就可以像使用核心模块一样去使用它。

格式是：const 常量名 = require('包名') 这个格式与引入核心模块的格式是一样的。

// 从npm下载 别人写的好代码，在本地引入，并使用
const dayjs = require('dayjs')

console.log( dayjs()
.startOf('month')
.add(1, 'day')
.set('year', 2018)
.format('YYYY-MM-DD HH:mm:ss') );

console.log(dayjs);

以上代码的整体目录结构

project01
├── node_modules        #  统一放置下载的包
│   └── dayjs                #  某个包
├── xx.js                        #  业务代码， 引入dayjs来使用
├── package.json           #  记录本项目的信息
└── package-lock.json   #  下载包的详细信息

下载使用包的细节1-package.json

npm init 命令

在某个目录下开启小黑窗，输入如下命令：npm init

它会启动一个交互式的程序，让你填入一些关于本项目的信息，最后生成一个package.json文件。

如果你希望直接采用默认信息，可以使用:

npm init --yes
// 或者是 npm init -y

说明：

这个命令只需要运行一次，它的目的仅仅是生成一个package.json文件。
如果项目根目录下已经有了package.json文件，就不需要再去运行这个命令了。
这个package.json文件后期是可以手动修改的。

package.json文件

它一般是由npm init命令创建出来的（也可以正常被CV），它的整体内容是一个json字符串，用来对当前项目进行整体描述。

其中最外层可以看作是一个js的对象（每一个属性名都加了""，这就是一个典型的json标记）。

这个文件中有非常多的内容，我们目前学习如下几个：

name：表示这个项目的名字。如是它是一个第三方包的话，它就决定了我们在require()时应该要写什么内容。
version：版本号
keywords：关键字
author: 作者
descrption: 描述

其它可参考

1.package.json文件 -- JavaScript 标准参考教程（alpha）

2.package.json | npm 安装文档

下载使用包的细节2-node_modules文件夹

作用

这个文件夹中保存着我们从npm中下载来的第三方包。在使用npm install 命令时，会从npm网站下载对应的包到这个文件夹中。

下载包的逻辑

npm install 包时，它会先把包对应的资料下载下来，如果包还有其他的依赖项，也会下载下来；如果依赖项还有依赖项，会继续下载。

下载使用包整体回顾

执行逻辑

当键入npm install XXX之后（这里假设这个XXX包是存在的，也没有出现任何的网络错误）：

如果有package.json
(1) 修改package.json文件。根据开发依赖和生产依赖的不同，决定把这句记录在加在devDependencies或者是dependencies列表中。
(2) 修改node_modules文件夹

1. 如果有node_modules文件夹，则直接在下面新建名为XXX的文件夹，并从npm中下来这个包。如果这个包还有其它的依赖，则也会下载下来。
2. 如果没有node_modules，则先创建这个文件夹，再去下载相应的包

如果没有package.json。会给一个警告信息。

小结

建议先用init命令创建package.json之后，再去install
在分享代码时，我们一般不需要把node_modules也给别人（就像你不需要把day.js给别人，因为他们可以自己去下载）。对方拿到我们的代码之后，先运行npm install(后面不接任何的包名)，自己去安装这些个依赖包。

下载包-修改镜像源

下包速度慢的原因：默认情况下，npm 从一个名为 https://registry.npmjs.org/ 的服务器上下包。这个服务器在国外，因此下包速度会非常慢。

解决方案：把 npm的下包地址，从国外的服务器切换为国内的服务器。

检查当前的下包地址：

npm config get registry

把下包的地址切换为国内的淘宝服务器

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

全局安装包和本地安装包

我们通过npm install 命令来安装包，简单说就是把包从npm的官网（或者是指定的镜像源）下载到我们自己的电脑中。那具体这个包下载到哪里了，还是有一点讲究的。

分成两类：

全局安装: 包被安装到了系统目录（一般在系统盘的node_modules中）。

- 命令：npm install -g 包名 或者 npm install 包名 -g
- 辅助提示：

npm root -g // 查看全局包的安装目录
npm list -g --depth 0 //查看全局安装过的包

局部安装（或者叫本地安装)，包安装在当前项目的根目录下（与package.json同级）的node_modules中。

- 命令：npm install 包名

全局包与本地包的区别

全局安装的包一般可提供直接执行的命令。我们通过对一些工具类的包采用这种方式安装，如：
gulp, nodemon, live-server,nrm等。
本地安装的包是与具体的项目有关的，我们需要在开发过程中使用这些具体的功能。

一个经验法则：

要用到该包的命令执行任务的就需要全局安装
要通过require引入使用的就需要本地安装

一个判断标准：看这个包的说明文档

全局安装nrm包

目标

掌握 nrm 的安装和使用，能用它快速切换npm镜像源

nrm的作用

nrm 这个工具是帮助我们切换安装包的来源的。因为下载包时，默认是从npm官网（国外的网站）下载，速度可能会比较慢，我们可以手动去切换安装来源。

不应该只限于某个具体的项目，所以我们采用全局安装的方式来安装它。

nrm包的地址：nrm - npm

nrm的使用方法

下载使用的操作步骤

共三步

第一步：全局安装 npm install nrm -g
第二步：列出所有的源信息（*）标注的就是当前使用的源 nrm ls
第三步：根据需要切换源。例如：指定使用taobao源。nrm use taotao

接下来，正常安装你需要的包

如果nrm ls不能用，请看这里：

安装npm后，nrm ls 报错internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)_LQCV587的博客-CSDN博客

const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

全局安装nodemon包

背景

我们每次修改了代码，要想代码生效都需要重新运行命令:

这有点麻烦哈。

有没有一个工具会自动检测到我们的修改并自动重新运行我们的代码呢？有，它叫nodemon。地址

作用

它能帮我们自动检测到我们的代码的修改，并自动重新运行我们的代码

安装 nodemon

通过npm包管理工具来进行安装。

步骤：

在任意位置打开一个小黑窗，输入如下命令：

npm install -g nodemon 回车

此操作需要联网，根据网络速度所耗时间不同。如果这个命令执行完成并没有报错，就是说明安装成功了。

使用nodemon

等待安装成功之后，使用方法也非常简单：在命令中，使用nodemon来代替node。

例如：

// 原来是：
node server.js

// 现在是
// 改成 nodemon server.js
nodemon server.js

它的好处在于会自动监听server.js这个文件的变化，如果变化了，就会重新自动再去运行。相当于是如下伪代码：

while(server.js 变化了){
  node server.js
}

说明：

它是一个第三方的包（其它程序员写的工具）
之前的node server.js还是可以用的。

可能会出现的错误及解决方案

如果报错如下

解决办法是：

- 用 管理员 方式，打开命令行（powershell）窗口
- 执行 set-ExecutionPolicy RemoteSigned;
- 在出现的选项中，输入 A，回车。
- 重新打开小黑窗

2.如果报错如下

解决办法是：添加电脑的环境变量

全局安装serve包

它用来快速生成静态网页服务器

安装

npm i -g serve

使用

开发依赖和生产依赖(了解)

在本地安装包时，表示我们这个项目要用到这个包，换句话说，我们这个项目要想成功运行，要依赖于这些个包。

但在，具体在项目进行的哪一阶段依赖于这些包呢？也有具体的差异。

本地开发 ----> 上线运行

理解

举个生活中建房子的场景：

在建房子时，我们依赖：

辅助工具：尺子，水平仪，脚手架
原材料：钢筋，水泥

在住房子时，我们依赖：

原材料：钢筋，水泥

在房子进入到了使用阶段时，我们就不再需要尺子，水平仪，脚手架等这些个辅助工具了。我们买一所房子时，也不应该支付巨型脚手架的费用。

在开发前端项目的过程中也存在类似的问题：我们的开发过程和使用过程是分开的，开发项目时需要用到的包可能在使用项目时就不需要用到了。

假设有这么两个包：

gulp-htmlmin。这个工具是用来把html代码进行压缩的（去掉空格，换行等），我们需要在开发时使用它，而项目一旦上线，我们就不再需要它了。，因此将它归类为"开发依赖"。
axios。在开发时参与源码编写，在发布上线的生产环境中也是需要它的。不仅在开发环境编写代码时要依赖它、线上环境也要依赖它，因此将它归类为"生产依赖"。

操作

这两种依赖关系，在具体操作的过程中，有如下区别

保存到开发依赖(devDependencies)

npm install 包名 --save-dev
// 或者 npm install 包名 -D

通过这种方式安装的包出会现在package.json文件中的devDependencies字段中。

保存到生产依赖(dependencies):

npm install 包名
// 或者 npm install 包名 -S
// 或者 npm install 包名 --save

通过这种方式安装的包出会现在package.json文件中的dependencies字段中。

技巧

加了-D : 开发依赖，这就表示这个工具包只在开发项目时候要用，项目开发完成就不需要
不加-D：生产依赖，这就表示这个工具包在项目做完了之后也要用。

什么包加上-D,什么包不要加？------- 看文档

npm包从创建到发布

背景

在工作中我们积累了一些自己的功能代码。这些功能代码可以在其它项目中重复使用，此时我们就可以选择把代码打包放在[npm]上,在需要要使用的项目中，通过npm install去下载下来。

准备工作：

在npm上注册账号

npm项目初始化

在本地磁盘上创建一个空项目，取文件夹名为myNpm（根据自己的实际情况去名字）。注意请先去npm网官去确定一下，这个项目名是否已经被占用了。（如果这个名字已经被占用了，则你是无法向npm上上传的）。

检查方式

npm view 包名
# 这个命令用来查看 某个包的信息
# 如果返回404，说明这个项目名在npm官网上找不到，此时你就可以使用。
# 否则，说明不可用。

很确定地告诉你，myNpm这个包已经被别人占用了，你需要去自己用另一个名字哈。

npm init --yes

命令来创建一个package.json文件，对你项目myNpm信息进行设置。

完成功能开发

正常开发，完成你的代码。在默认情况下，index.js是这个项目的入口文件。

下面是一个最简单的示例：

//tools.js
const relativeTime = (oldTime) => {
  const t = new Date(oldTime)
  // Date.now()：现在的时间戳（毫秒）
  // t.getTime()：旧时间的时间戳（毫秒）

  const diff = Date.now() - t.getTime() // 相隔多少毫秒
  // Math.floor 向下取整： 1.7年 ---> 1年前
  const year = Math.floor(diff / (1000 * 3600 * 24 * 365))
  if (year) {
    return `${year}年前`
  }
  const month = Math.floor(diff / (1000 * 3600 * 24 * 30))
  if (month) {
    return `${month}月前`
  }
  const day = Math.floor(diff / (1000 * 3600 * 24))
  if (day) {
    return `${day}天前`
  }
  const hour = Math.floor(diff / (1000 * 3600))
  if (hour) {
    return `${hour}小时前`
  }
  const minute = Math.floor(diff / (1000 * 60))
  if (minute) {
    return `${minute}分钟前`
  } else {
    return '刚刚'
  }
}

const formatDate = (dateTime) => {
  // console.log(date)
  // date = new Date();
  const date = new Date(dateTime) // 转换成Data();
  console.log(date)
  var y = date.getFullYear()
  console.log(y)
  var m = date.getMonth() + 1
  m = m < 10 ? '0' + m : m
  var d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  return y + '-' + m + '-' + d
}



// 通过module.exports来导出模块
module.exports = {
  formatDate,
  relativeTime
};

切换当前npm源到官网

由于我们需要把包上传到npm上，所以要先确保当前的npm源是npmjs.org。与之相关的命令有如下两条。

（1）查看当前的npm的registry配置.

npm config get registry 
# 查看当前的npm的registry配置，确保是https://registry.npmjs.org

# 如果不是，可以通过如下命令来设置
# 手动设置registry
npm config set registry https://registry.npmjs.org

（2）或者使用nrm工具来设置：

连接npm

npm adduser

这个命令需要输入四个信息以供连接上npmjs：

用户名
密码
邮箱（是你在npmjs官网上注册时使用的信息）
校验密码。它会向你的邮箱发邮件

如果你已经不是第一次连接了，这一步是可以省略的。

你也可以通过如下命令检查自己是否连接成功了。

> npm who am i

如果成功了，则可以进行最后一步了：publish

如果想退出:

npm logout

把包上传到npm

命令： npm publish

如果成功：

-----------------------------------
npm notice
npm notice package: tool61@1.0.0
npm notice === Tarball Contents ===
npm notice 1.3kB index.js
npm notice 220B  package.json
npm notice === Tarball Details ===
npm notice name:          tool61
npm notice version:       1.0.0
npm notice package size:  855 B
npm notice unpacked size: 1.5 kB
npm notice shasum:        3bfba7bc92e242810a850ac39ded7ebe992a6d9c
npm notice integrity:     sha512-VoRuxxbcGzXen[...]v3tKWYUT1B1AQ==
npm notice total files:   2
npm notice
+ tool61@1.0.0

出错的可能是：

这个包名被别人先用了。
包的版本号不对：每次publish时，包的版本号都应该要大于之前的版本号。
文件过大。你可能需要创建.npmignore文件来设置在打包时要忽略哪些文件。如下是一个demo.

# .npmignore
/node_modules
npm-debug.log
/src
/examples
/build

如果没有报错，则表示一切ok，你可以用你的帐号密码登陆npm，去查看你名下的package是否有了myNpm

下载使用

通过npm install 包名即可来安装包。然后，告诉你的小伙伴们去下载使用吧。

删除包

npm unpublish --force //强制删除

如果你的包没有什么用处，建议删除掉，以节约公共资源。

更新包

修改代码，保存。
更新版本号。可直接在package.json中修改：只能改大，不能改小。
重新publish

拓展：npm包的问题的问答

为什么要把自己的代码上传到npm上？

优秀的代码供所有人复用
提升职场竞争力 ----- 在团队其它同事没有做，你做了！
有了这个目标，我们写项目（写代码）时，就会更加考虑代码的通用性。

优秀的代码从哪里来？

自己写的，同事写的，总结别人....

把代码上传到npm上去，有格式要求吗？

有，必须要是包的格式

包是什么格式？

格式：

一定要有 package.json这个文件。它就是用来对包进行整体说明。（name, version, description, author, dependencies, ......）. npm init --yes
有自己的代码文件。这个代码文件要在package.json中的main中声明。