npm 发包初体验-五八三

前言

在上篇文章宝塔面板——使用Docker，基于Nexus3 搭建 npm 私仓中，介绍了使用Nexus搭建私仓并发包的流程，私仓适用范围有限（大多为公司团队），类似一些开源项目则会选择使用npm，近期偶然看到了coderwhy老师的 npm 发包视频，来一起体验一下吧☀️

一、语义化版本

1. 版本格式

在 package.json 文件中，有许许多多的依赖包，其版本格式为：主版本号.次版本号.修订号，版本号递增规则如下：

主版本号（major）：当你做了不兼容的 API 修改

次版本号（minor）：当你做了向下兼容的功能性新增

修订号（patch）：当你做了向下兼容的问题修正

先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。

举个例子?: 假设有一个名为”example-package”的依赖包，其版本号是2.1.4

如果版本更新为3.0.0，表示存在重大改变，你可能需要调整代码以适应新版本。

如果版本更新为2.2.0，意味着新增了一些功能或改进，但不应该影响你现有的实现。

如果版本更新为2.1.5，表示修复了一些错误，但没有引入新功能。

2.版本约束

在 Vue 项目或其他 Node.js 项目中，版本号前缀如 *、^、~ 等用来表示依赖包版本的约束。这些前缀有不同的意义，影响着在运行npm install时依赖包的版本选择。

*：使用 * 作为版本前缀表示愿意接受任何版本的依赖包。

这意味着在安装依赖时，npm将选择最新的可用版本。

但是，这种做法不推荐，因为最新版本可能包含破坏性的变化，可能导致你的应用不稳定或出现错误。

^：使用 ^ 作为版本前缀，表示允许安装符合下一个主版本的依赖包。

例如，如果你指定了 “^2.1.3“，npm将安装2.x.x版本中最新的依赖包，但不包括3.x.x版本。

~：使用 ~ 作为版本前缀，表示允许安装符合下一个次版本的依赖包。

例如，如果你指定了 “~2.1.3“，npm将安装2.1.x版本中最新的依赖包，但不包括2.2.x版本。

如果需要确保稳定性，建议使用具体的版本号（例如 “2.1.3“）

语义化版本的更多介绍，链接放这啦?：语义化版本2.0.0

二、发包前准备工作

1. npm 账号

工欲善其事必先利其器，第一步先在npm官网注册并登录上账号，注意：邮箱要能接收到验证码

2. 切换镜像源

nrm 是 npm 的镜像源管理工具，有时候国外资源太慢，使用 nrm 就可以快速的在 npm 源间切换，回顾搭建私仓那篇文章也提到了些许，这里再唠叨一下

// nrm 全局安装
npm install -g nrm



// 查看镜像源列表
nrm ls

// 添加镜像源
nrm add <镜像源名称> 镜像源地址
如：nrm add coderSong http://xx.xx.xx.xx:8081/repository/npm-group/ 
添加完成后再使用：nrm ls 指令查看列表中是否有刚才添加的镜像源

// 切换镜像源
nrm use coderSong


// 删除镜像源
nrm del coderSong

因为我们是发包到npm，所以切换一下镜像源：nrm use npm

3. 代码编写

(1) 主要是介绍一下发包流程，就用一些简单的代码吧，目录结构如下：

// math.js （这里目前只有加法和减法）
export function sum(num1, num2) {

  return num1 + num2;

}




export function sub(num1, num2) {

  return num1 - num2;

}

// format.js
export function formatDate() {
  return Date.now();
}

// index.js

export {formatDate} from './format.js'

export {sum,sub} from './math.js'

(2) 但是，仅有这三个文件还不够，在控制台中使用指令：npm init -y 初始化 package.json 文件

包的名称 + 版本号构成唯一标识

name：包的名称

version：包的版本

description：包的简介

main：包的入口文件，位置在文件夹的根目录

keywords：包的关键词，在检索时更容易被搜索到

author：包的作者

license：许可证

至此，准备工作结束，下面开始发包了

三、发包步骤

1. 登录

当镜像源已经切换至 npm 后，输入指令：npm login，根据提示一步步输入信息，如下图：

2. 发包

输入指令：npm publish --access=public 进行发包

如上所示，已经发包成功了，下面我们到 npm 官网看一下

3. 更新包

（1）当我们对代码进行一些修改后，便要重新发包，此时要记得变更 package.json 中的版本号，版本格式在文章顶部?，在代码中新增乘法举例：

// math.js
export function sum(num1, num2) {

  return num1 + num2;

}




export function sub(num1, num2) {

  return num1 - num2;

}


// 新增乘法
export function multiply(num1, num2) {
  return num1 * num2;
}

// index.js

export {formatDate} from './format.js'




// 这里也要加一下
export {sum,sub,multiply} from './math.js'

（2）变更版本号为:1.1.0,重新发包：npm publish

4. 查看包的所有版本

使用指令：npm view @codersong/npm-publish-package versions

5.指定某个版本的包过期

npm deprecate 包名@包的版本 ‘过期原因‘

使用指令：npm deprecate @codersong/npm-publish-package@1.1.0 'test deprecate'

4. 删除包（强制删除）

使用指令：npm unpublish @codersong/npm-publish-package -f

Tips?: npm 不鼓励任何形式的删除，主要因为我们发布的包可能已经被其他人引用，如果我们删除了此包，其他人在重新安装含有我们包的依赖的工程时，会出现找不到包问题。

基于此，npm 做了相关的删除限制：

删除的版本24小时后方可重发!

只有发布72小时之内的包可以删除!

四、使用包

（1）新建npm-use-package文件夹，目录结构如下：

（2）这里我们要做如下几个操作：

初始化 package.json 文件：npm init -y

安装 @codersong/npm-publish-package 依赖：npm install @codersong/npm-publish-package

编写 src/index.js代码，下面有?

安装 webpack 进行打包：npm install webpack webpack-cli -D

运行webpack打包指令：npx webpack 进行打包，打包后会生成 dist 文件夹

编写 index.html 代码，下面有?

// src/index.js
import  {formatDate,sum,sub,multiply} from '@codersong/npm-publish-package'



console.log(formatDate()); // 时间戳
console.log(sum(20,30)); // 50
console.log(sub(30,20)); // 10
console.log(multiply(20,30)); // 600

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/main.js"/>
</body>
</html>

（3）在浏览器控制台中看一下,和预期结果一样，说明我们发的包可以被正常使用