目录

一.包与npm

1.包

2.npm与下载包

二.在项目中安装包

1.初体验安装包

2.了解包的语义化版本规范

3.解决多人协作开发时的拉取问题——包管理配置文件

1.自定义配置文件

2.包管理配置文件——dependencies节点

3.包管理配置文件——dev Dependencies节点

4.卸载包

三. 淘宝NPM镜像服务器解决下载速度慢

1.了解镜像服务器

2.切换镜像源的俩种方法

1.方法一_手动输入地址

2.方法二_nrm工具辅助

四.解决对于包的疑惑以及规范的包结构

1.包的分类

2.总结包结构的规范

五.使用moment包完成时钟案例

六.案例——创建一个自己的包并发布

1.写包

1.初始化

2.初始化package.json配置文件

3.书写功能 \ 向外共享

4.编写README.md文件

2.npm操作

1.终端登录npm

2.发布包到npm

3.在终端运行删除npm中的包


一.包与npm

1.包

包也叫做第三方模块,第三方模块我们并不陌生,比如jQuery、art-template、moment、nrm、bootstrap等等都属于包,我们在Node.js中使用过fs、http等内置模块,这些不属于包,包是由第三方的团队或者个人开发的第三方模块供我们免费使用,因为Node.js中的内置模块不多,只是提供一些底层的API,并不能满足我们的项目开发需求效率,所以就有很多的大佬基于内置模块开发出了包,使我们更快更高效,我们使用的jQuery、axios等就是基于原生JS(浏览器内置API)开发出来的包

2.npm与下载包

国外一家IT公司旗下的一个网站http://www.npmjs.com/

它是全球最大的包共享平台,任何你想要的包,在这个平台上你都可以找到,我们可以访问该公司提供的服务器来进行下载包(https://registy.npmjs.org/),当然我们直接打开这个服务器是什么都没有的,我们需要要一个包管理工具来下载、管理包

npm(node package manager)就是该公司提供的一个包管理工具,当我们下载安装Node.js的时候,npm其实就已经安装到了我们自己的电脑上了,我们可以打开终端输入:

npm -v

就可以查看到我们电脑上npm包管理工具的版本号


二.在项目中安装包

1.初体验安装包

我们如果想要在项目中安装一个包来供我们开发使用,我们可以在项目目录终端中执行如下的命令:

#我们希望在npm工具上下载x.xx.x版本号的XXX包
#如果我们不写版本号,就会默认安装最新版本
npm install 包的名称@x.xx.x#简写
npm i 包的名称@x.xx.x

这时我们的项目目录中就会多出这样一个文件夹和一个配置文件:

node_modules                package-lock

node_modules文件夹是用来存放我们所有安装到该项目的包(我们使用require()方法导入包的时候,其实就是从这个目录中查找并加载包

package-lock.json配置文件就是用来记录node_modules目录下的每一个包的信息(名称、版本号、下载地址等等)

我们不要修改其中任何内容,当我们执行删除包或者安装包的时候,npm包管理工具会自动的进行修改维护操作

tips:如果我们已经有了一个低版本的包,但是现在想要升级,我们并不需要卸载之后再安装,我们需要做的只是下载一个对应版本号的包,就会自动的覆盖之前的包

2.了解包的语义化版本规范

我们看到包的版本号一般为2.12.2这样的形式,这是以点分十进制的形式来定义的

第一位:代表着大版本(也就是说当底层结构重构时,才会修改大版本号【+1】)

第二位:代表着功能版本(也就是说当新增了功能时,修改版本号【+1】)

第三位:代表着BUG修复版本(也就是说这个包有BUG,当修复完成之后,该版本号【+1】)

tips:前一位版本号增加,后面所有版本号清零

3.解决多人协作开发时的拉取问题——包管理配置文件

1.自定义配置文件

如果我们现在正在进行一项多人开发的项目,那我们一定会用到Git或者SVN等版本控制系统,项目文件一般使用的包很多,所以导致整个项目的占用体积或者说存储就非常的大,我们并不好上传,同事也不好拉取,这时我们就需要用到包管理配置文件

我们知道npm包是开源的,所以大家都可以下载,我们需要做的就是让同事知道我们用到了哪些包就可以了,我们共享的时候仅仅把node_modules这个文件夹忽略掉就好了(以Git为例:添加到Git项目目录中的.gitignore忽略文件中),包的信息由另一个json文件来存储(包管理配置文件)

先不要手动创建,npm包管理工具为我们提供了一个简介的命令,可以快速创建:

npm init -y

 tips:这个命令只可以在英文的目录下创建成功,我们尽量使用英文命名,并且不能出现空格

创建好了之后,我们每安装一个包,npm包管理工具就会自动的把包的名称和版本号记录到package.json文件中

通过我的配置文件,大家可以知道我安装了一个叫做moment的包,版本号为2.29.1

2.包管理配置文件——dependencies节点

我们刚才通过npm init -y的命令自定义创建了一个package,json的配置文件,可是我们不难发现,在之前下载完包的时候,npm自动生成了一个package-lock.json的配置文件,这个配置文件又是做什么的呢?

这是npm的一个规定,在项目的根目录中,我们必须提供一个叫做package-lock.json的配置文件,它只用来记录一些与项目相关的一些配置信息(比如:项目名称、版本号、描述、项目中的包的版本号、名称,开发期间需要用到,部署期间是否需要用到等等)

其中有一个dependencies的一个节点,里面记录了我们安装了哪些包,包的名称以及版本号:

现在我们转换一下站位角度,假如我们现在从Git上拉取了同事的一个项目模块,里面的包以及被剔除了,我们怎么才能根据配置文件下载呢?

如果有很多的包呢?我们当然不可能一直执行npm i npmname@x.xx.x这样的命令,简直没有效率可言,所以npm管理包工具为我们提供了一次性下载所有包的命令(前提是要有配置文件):

npm installnpm i

这俩种方法都可以,在执行这个命令的时候,npm会先读取package-lock.json文件中的dependencies节点,读取到记录之后,会根据依赖包的名称和版本号来一次性将所有依赖包都下载到项目中

tips:如果我们没有安装包,拉取到项目直接执行,会出现如下报错:

Cannot find module'XXXXX'

3.包管理配置文件——dev Dependencies节点

如果这个包只在项目开发阶段用到,项目上线之后不会用到的话,我们需要将这个包记录到 dev Dependencies节点中:

npm i 包名 -Dnpm i -D 包名npm install 包名 --save-dev

这三种都可以,我们在下载包的时候,就先定义好它应该存在于哪个节点

我们在npm官网中查询这个包的信息,包的开发者会告诉你应该存在于哪个节点:

像上图这个moment包,这个包在开发期间和上线都会用到,所以不需要添加到dev Dependencies节点

4.卸载包

npm uninstall XXXX

同样,卸载之后该包的所有信息会从配置文件中移除


三. 淘宝NPM镜像服务器解决下载速度慢

1.了解镜像服务器

我们在下载包的时候,总是会很慢,如果下载一个俩个可以接受,但是当同事给到你配置文件,你一看:需要下载100个,那怎么办?难道要下载一下午吗?

不过这样好像也是个摸鱼的理由~~~~~

不行,不能这样!!!!

因为我们使用npm下包的时候默认是从国外的服务器下载的,网络数据传输需要经过漫长的海底光缆,因此下载速度慢

是谁我不说,它在国内也搭建了一个服务器,专门把国外的官方服务器上的包每隔一段时间就同步到国内的服务器,他我们提高了下载的速度

这个拥有完全相同的副本的服务器就叫做镜像(Mirroring)服务器

镜像是一种文件存储形式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本,就叫做镜像

2.切换镜像源的俩种方法

1.方法一_手动输入地址

切换镜像源就是切换下包的服务器地址

我们可以使用如下命令来查看当前的镜像源:

npm config get registry

(因为我之前切换过了,所以现在使用的是淘宝的镜像源)

然后我们输入这个地址就可以切换到淘宝的镜像源了

2.方法二_nrm工具辅助

万一写错了就完蛋了,后续会出现很多的问题,所以我们可以使用nrm工具来帮助我们切换镜像源,我们利用nrm提供的终端命令就可以快速的切换镜像源了:

npm i nrm -g

-g表示全局包,全局可用

我们可以看一下npm官网中的nrm介绍,开发者也推荐我们安装到全局:

安装完毕,然后我们可以使用

nrm ls

查看所有的镜像源:

然后使用

nrm use XXX

切换到淘宝

(官网有更多的详细介绍,大家可以自行去看更多)

nrm - npmhttps://www.npmjs.com/package/nrm


四.解决对于包的疑惑以及规范的包结构

1.包的分类

我们之前提到了-g这个命令,意思是下载到全局包,那我们就不得不提一提包的分类了:

我们使用npm下载的包分为俩种:

项目包(只在指定项目中发挥功能)【被安装到node_modules目录中的包都是项目包】

其中项目包分为了:

开发依赖包:被记录到dev Dependencies节点中的包,只在开发期间使用

核心依赖包:被记录到dependencies节点中的包,开发期间以及上线都会用到

全局包(在全局中发挥功能)【安装目录在C盘下面的用户目录中的AppData隐藏文件中的Roaming中的npm目录中的node_modules里面】,如果这个包为我们提供了很方便的命令,那我们可以考虑下载到全局包

tips:卸载全局包:

npm uninstall 包名 -g

2.总结包结构的规范

包必须以单独的目录存在

顶级目录必须包含package.json包管理配置文件

package.json中必须包含name(名称)、Version(版本号)、main(包入口)属性

tips:包入口是我们导入包的时候,调用的模块名

 more...


五.使用moment包完成时钟案例

传统自定义方法:

//定义格式化时间的方法
function dataFormat(){const date = new Date()const y = date.getFullYear()const m = padZero(date.getMonth() + 1)const d = padZero(date.getDate())const hh = padZero(date.getHours())const mm = padZero(date.getMinutes())const ss = padZero(date.getSeconds())return `${y} - ${m} - ${d} - ${hh} - ${mm} - ${ss}`
}//定义补零的函数
function padZero(z){return z < 10 ? '0' + z : z
}//模块化
module.exports = {dataFormat
}
const TIME = require('./index')const date = new Date()
const newdate =  TIME.dataFormat(date)
console.log(newdate);

使用moment包:

const moment = require('moment')const dt = moment().format("YYYY-MM-DD hh:mm:ss")
console.log(dt);

相关moment包文档,请查阅:Moment.js | Docshttps://momentjs.com/docs/#/use-it/


六.案例——创建一个自己的包并发布

首先,我们需要去写好我们的包:

1.写包

1.初始化

我们需要创建一个package.json的配置文件以及一个JS文件,再创建一个src文件夹(用于存放功能模块),最后创建一个README.md的文件来编写说明文档

2.初始化package.json配置文件

我们需要为package.json文件添加这样几个属性:

{"name": "issuetime",//包名(不可以和npm网站上的包名重名)"version": "1.0.0",//版本号"main": "issuetime",//包入口"description": "提供了XXX功能",//简短的描述"keywords": ["issue","time","issuetime","dateFormat","escape"],//关键字"license": "ISC"//遵循的开源许可协议
}

(这是一个json文件,我为了方便注释就采用了JS模板来写)

3.书写功能 \ 向外共享

我们不在之前创建好的JS文件中书写,那个JS文件只用于导入功能模块和暴露成员

我们将对应的功能书写到src文件夹中的功能模块(例如我们书写了格式化时间以及转义特殊字符的功能),也就说一个功能创建一个JS文件来存放:

//格式化时间
function dateFormat(dateStr){const date = new Date()const y = date.getFullYear()const m = getPadZero(date.getMonth() + 1)const d = getPadZero(date.getDate())const hh = getPadZero(date.getHours())const mm = getPadZero(date.getMinutes())const ss = getPadZero(date.getSeconds())return `${y}-${m}-${d} ${hh} : ${mm} : ${ss}`
}//时间补零
function getPadZero(z){return z <= 9 ? "0" + z : z
}module.exports = {dateFormat
}
//HTML特殊字符转义
function htmlEscape(htmlStr){return htmlStr.replace(/<|>|&|"/g, match => {switch (match) {case '<' : return "&lt"case '>' : return "&gt"case '"' : return "&quot"case '&' : return "&amp"}})
}//重新转义为特殊字符输出
function htmlUnEscape(Str){return Str.replace(/&lt|&gt|&quot|&amp/g,match => {switch (match) {case '&lt': return '<'case '&gt': return '>'case '&quot': return '"'case '&amp': return '&'}})
}
module.exports = {htmlEscape,htmlUnEscape
}

我们不仅需要在这俩个模块中进行暴露方法,当我们使用issuetime.js文件导入完成之后,还需要在issuetime.js文件中再次将导入模块中的方法暴露出来:

const dateFormat = require('./src/dateFormat')
const htmlEscape = require('./src/htmlEscape')//向外暴露成员
module.exports = {...dateFormat,...htmlEscape
}

4.编写README.md文件

这是包的使用说明,我们可以在这个文件中以markdown的格式将我们对于包使用方法的阐述标明给使用者:

## 安装```
npm install issuetime
```## 导入```js
const issue = require('issuetime')
```## 格式化时间
```js
//调用dateFormat方法 对事件进行格式化
const date = issue.dateFormat(new Date())
//结果 : 2022-11-16 09:06:28
console.log(date)
```## 转义HTML中的 < > & "这四个特殊字符
```js
//待转义的HTML字符串
const htmlStr = "<h1 title= '标题'><em>这是&nbsp;</em>标题</h1>"
//调用htmlFormat方法 对特殊字符进行转义
const str = issue.htmlEscape(htmlStr)
//结果 : &lth1 title= '标题'&gt&ltem&gt这是&ampnbsp;&lt/em&gt标题&lt/h1&gt
console.log(str)
```## 还原HTML中的 < > & "这四个特殊字符
```js
//调用htmlUnFormat方法 对特殊字符进行还原
const str2 = issue.htmlUnEscape(str)
//结果 : <h1 title= '标题'><em>这是&nbsp;</em>标题</h1>
console.log(str2)
```## 开源协议
ISC

我们在之后发布完会看到类似这样的介绍效果:

2.npm操作

1.终端登录npm

我们自己的编写工作以及完成了,接下来我们注册npm的账号

注册好之后,我们在终端输入命令:

npm login

需要输入用户姓名、密码、邮箱、即可登录

tips:在登录前,我们必须把之前的淘宝镜像切换为npm官方服务器

保证我们在官方服务器中,我们就可以进行登陆了:

这里的密码我们自己看不到,但是输入的时候,每个字符都会被记录

2.发布包到npm

将终端切换到我们的包的根目录下,运行终端命令:

npm publish

成功上传

3.在终端运行删除npm中的包

npm unpublish 包名 --force

tips:只能删除72小时之内发布的包;删除之后,24小时内不能重复发布

删除成功

Node.js——npm_包的概念与操作相关推荐

  1. (18) Node.js npm包管理工具

    一.npm概述 npm (Node Package Manager)是 Node.js 的包管理工具. 什么是包?包就是一坨代码,就是 Node.js 的第三方模块. 例如:JQuery模块,Boot ...

  2. Node.js之包管理npm

    Node.js之包管理npm 前言 一.node.js下载 二. node的更新和其他操作 二.npm基本使用 1. 查看是否安装成功 2. 查看是否有npm 3. npm其他命令 前言 npm是no ...

  3. Node.js 连接 MySQL 并进行数据库操作 –node.js 开发指南

    Node.js是一套用来编写高性能网络服务器的JavaScript工具包 通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,本篇就来 ...

  4. Node.js「一」—— Node.js 简介 / Node.js 模块 / 包 与 NPM

    本文为 Node.js 系列笔记第一篇.文章参考:nodejs 教程 -- 大地:<深入浅出 Node.js>:阮一峰 nodejs 博客 文章目录 一.Node 简介 1. 简单介绍 2 ...

  5. 从零开始Node.js—11mysql包的使用

    前言 后端代码要实现对数据的存储.管理和维护,离不开工具数据库. MySQL是市场上应用最广泛的开源免费数据库,非常建议学习.对于MySQL数据库介绍可以参考:安装教程,使用教程.本文的重点在expr ...

  6. Node.js 连接 MySQL 并进行数据库操作

    Node.js是一套用来编写高性能网络服务器的JavaScript工具包 代码片段(6) [代码] 安装 node-mysql view source print? 1 $ npm install m ...

  7. node.js 最全命令行配置操作win10

    ** node.js安装教程就是下载 傻瓜式安装 接下来要配置相关环境 所有需要用到的脚本都在这里了. 历史版本的链接:https://nodejs.org/dist/ ** 查看node版本号 no ...

  8. Node js npm 包管理工具的基本使用

    初始化一个node项目 npm initnpm init -y 没有 -y 参数表示自定义一些参数 -y 参数表示默认选项 初始化项目之后就会多出一个 package.json 的文件 查找需要的包 ...

  9. 十次方需求分析与技术架构、Node.js、包资源管理器NPM、Webpack

    1 十次方需求分析与技术架构 1.1 十次方是个什么样的网站 <十次方>是程序员的专属社交平台,包括头条.问答.活动.交友.吐槽.招聘六大 频道.如图所示: 十次方名称的由来:2的10次方 ...

最新文章

  1. 一位职场老鸟的 10 年复盘,帮你避坑不吃亏!
  2. vc++ 显式链接dll
  3. 测试build出来的dist文件夹是否编译成功
  4. Base64编码及Android的应用
  5. QT的QFileSystemModel类的使用
  6. mysql索引是自动使用吗_mysql索引是自动使用吗?
  7. java8 从数组获取流_从数组到流再到Java 8
  8. c语言如何一直变换颜色,【图片】(原创)用纯C变了个变色输出字符的程序。。。【c语言吧】_百度贴吧...
  9. linux调用堆栈函数,使用 backtrace 获得 Linux 函数调用栈
  10. 检索 COM 类工厂中 CLSID 为{00024500-0000-0000-C000-000000000046} 的组件时失败
  11. (2006, ‘MySQL server has gone away‘) 原因和解决方案
  12. zynq开发系列3:GPIO连接MIO通过按键控制LED灯亮起
  13. 一个事务复制的bug--更新丢失
  14. Ubuntu18.04 ibus 中文输入法崩溃解决实录
  15. 深度学习调参经验分享(遥感建筑提取)
  16. SYD8811/SYD8810 一拖一离线批量烧录板(FD1201)使用说明
  17. ZB级的大数据探索与应用实践【附PPT】
  18. python语言单词_python单词_python 单词_python单词书 - 云+社区 - 腾讯云
  19. Mq的幂等性问题分析和基本处理
  20. Android TabLayout基本使用及完美调整指示器位置的技巧

热门文章

  1. Opencv调整运行窗口图片的大小
  2. 应用服务打车应用生死未卜 嘀嘀或傍上腾讯
  3. 当代音乐杂志当代音乐杂志社当代音乐编辑部2022年第12期目录
  4. Maven-Maven反应堆
  5. bootstrap-table自定义列排序
  6. 计算机软件著作权必须登记吗?根据国家法律法规规定,计算机软件著作权登记与取得著作权有没有关系?
  7. 设计模式之依赖倒置设计原则
  8. 使用python(turtle)画小猪佩奇
  9. Java并发深度总结:synchronized 关键字
  10. 香港理工大学智能计算实验室招收进化计算/机器学习/类脑计算方向全奖博士生/研究助理/博士后...