Node.JS npm 与包 第三方模块

冰镇生鲜
467 阅读7分钟

本文已参与[新人创作礼]活动， 一起开启掘金创作之路。

前言

所谓第三方模块 即 由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，使用前需要先下载。 像 别人写好的，具有特定功能的，我们下载过来就能直接使用的模块就是第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以Node.js 中的第三方模块又叫做包。 就像电脑和计算机指的是相同的东西，第三方模块和包指的是同一个概念，只不过叫法不同 。

正文

我们知道Node.js 有着非常优秀的开源社区。因为拥有开源社区，Node.js 提供了许多出色的模块，可为 Web 应用增加更多优秀的功能。例如，socket 可用于处理客户端和服务器之间的恒定通信，从而使服务器可向客户端发送实时更新。Express.js, Koa.js, Hapi.js, Sails.js, Meteor 和 Derby 是由 Node.js 社区开发的一些其他顶级框架，用于加速应用开发过程。

常见的第三方模块形态：

  • 以js文件的形式存在，提供实现项目具体功能的API接口。例如 Express.js, Koa.js
  • 以命令行工具形式存在，辅助项目开发。 例如vue-cli脚手架

由于在使用 第三方模块（包） 之前,必须首先使用npm对其进行下载安装

所以在讲解第三方模块之前，我们先铺垫一下npm

npm与包

包从何来 —— npmjs.com

谈到包，就要说到国外大名鼎鼎的 www.npmjs.com/ 了

image.png

这可谓是全球最大的包共享平台，我们可以从这个网站上搜索到任何所需要的包，只要有足够的耐心！ 到目前为止，全球约 1100 多万的开发人员，通过这个包共享平台，开发并共享了超过 120 多万个包 供我们使用。

食用方法：

  • 从npmjs网站上搜索自己所需要的包
  • 从registry.npmjs 服务器上下载自己需要的包

以上两个网站如何使用 也大可不用在意 因为：

  • 搜索包对于初级开发来说很少用到，看教学视频或者书籍跟着用包就行
  • node集成了npm包管理工具，下载包直接在命令行 npm install 包名 就行

包管理工具 的名字叫做 Node Package Manager（简称 npm 包管理工具），这个包管理工具随着 Node.js 的安 装包一起被安装到了用户的电脑上。

在终端中执行 npm -v 命令，可以来查看自己电脑上所安装的 npm 包管理工具的版本号：

node -v

image.png

换源 以提高包下载速度

为什么下包慢

在使用 npm 下包的时候，默认从国外的 registry.npmjs.org/ 服务器进行下载，此时，网络数据的传输需要经 过漫长的海底光缆，因此下包速度会很慢。

如何解决 淘宝在国内搭建了一个服务器，专门把国外官方服务器上 的包定时同步到国内的服务器，然后在国内提供下包的服务。 从而极大的提高了下包的速度。

#查看当前下包镜像源
npm config get registry
# 将包的镜像源切换为淘宝镜像源
npm config set registry=https://registry.npm.taobao.org/
#检查镜像源是否下载成功(再次查看下包镜像源)
npm config get registry

更便捷的换源方法

为了更方便的切换下包的镜像源，我们可以安装nrm这个小工具，利用 nrm 提供的终端命令，可以快速查看和切换下 包的镜像源。

# 通过npm包管理器，将 nrm 安装为全局可用的工具
# i是install安装的简写，uninstal是卸载
# 安装可以用简写也可全称，卸载只能全称
# -g参数代表全局安装
npm i nrm -g
# 查看所有可用的镜像源
nrm ls
# 将下包的镜像源切换为taobao的镜像
nrm use taobao
# 查看当前的下包源
npm config get registry

npm命令常用参数

在项目中安装第三方模块

完整写法：

npm install 完整包名

简化写法：

npm i 完整包名
全局安装 局部安装 开发时依赖

全局安装

如果学过vue前端开发，相信大家一定知道，我们的vue安装是全局的

这样不论是在电脑何处创建项目，都不用再执行npm安装命令，可以全局使用

npm install vue -g

全局安装的包 在node安装目录下的node_modules文件夹中，

一般在 \Users\用户名\AppData\Roaming\ 目录下，可以使用npm root -g查看全局安装目录。

局部安装

局部安装很简单，去掉-g 命令即可

演示一个局部安装vue脚手架

npm install @vue/cli

开发时依赖

命令--save-dev是开发时依赖

比如webpack只有打包时起作用，项目实际运行中不需要。

对于webpack 我推荐这种做法，因为后面开发都是合作的，有时候自己本地的版本和团队的版本不符合。看复制下载来的代码是哪个版本，再配合安装。

npm install webpack@版本号 --save-dev
安装指定版本的包

默认情况，即使用 npm install xxx 命令安装包的时候，npm会自动安装最新的包。

如果需要安装指定版本的包。可以在包名后面，利用 @ 来指定安装具体版本。

npm i vue@2.6.10

包的版本号解释

包的版本号是以“点分十进制”形式进行定义的，总共有三位数字

例如 2.6.10 其中每一位数字所代表的的含义如下：

第1位数字：大版本

第2位数字：功能版本

第3位数字：Bug修复版本

版本号提升的规则：只要前面的版本号增长了，则后面的版本号归零

第三方包 moment 初体验

在往期文章，我们编写过一个自定义模块，用来格式化时间。

这次，我们不用麻烦的从头手撸造轮子

直接从全球最强最大的npmjs包共享平台下载一个 moment.js模块

正所谓站在巨人的肩膀上才能看得更远，用别人的包不丢人，嘿嘿。

演示

首先，我们已经很明确要使用 moment 包了，

所以可以直接在一个干净的全英文的目录下，新建一个终端用于执行npm命令

npm install moment

image.png

执行完成后可以看到目录下出现了一些文件

image.png

上述文件是标准的node包格式，其中：

  • node_modules文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时，就是从这个目录中查找并加载包。
  • packge-lock.json配置文件用来记录 node_modules 目录下的每一个包的下载信息，例如包的名字、版本号、下载地址等。

注意：不要手动修改 node_modules 或 package-lock.json 文件中的任何代码，npm 包管理工具会自动维护它们

总之就是不要管这些文件，现在，开始利用别人的轮子书写我们的代码

毕竟是别人的轮子，如果不看文档，肯定是无从下手的，

在前面，我们提到npmjs这个全球最大的包资源管理网站，

我们可以直接在那里搜索moment的文档进入查看即可

这里我直接给读者们一个传送门： moment文档

image.png

moment尝鲜指南

在目录下新建一个app.js文件(与node_modules同级)

// 导入moment包
const moment = require('moment')
// moment()方法获得当前时间
// format()按指定格式，格式化时间
const dt = moment().format('YYYY-MM-DD HH:mm:ss') 

console.log(dt)

运行结果：

image.png

是不是非常方便，比起自己写一堆代码来的便捷。

avatar
文章
阅读
粉丝