玩转npm包发布、更新(详细记录)

前言

在如今前端工程模块化普及开发的今天，我们更多的是通过 NPM快速的安装下载别人开发维护的npm包，我们不能仅停留在只会用别人的地步，我们也可以把自己常用的方法总结，比如作为一个公共的库，方便我们工作项目中快速的使用。本编文章，就带大家一起造轮子。

为什么要重复造轮子呢？其实很简单，就是我们不仅会用别人的，我们也要有自己独立设计的能力。参考了网上的一些文章，自己也踩了些坑，所以在此详细记录，如何发布、更新npm包。

1.github创建仓库（可选）

这一步是可选择的，假如我们希望持续维护一个npm包，也希望开源出来与开源社区同学们一起持续维护，我们可以把源码托管在github上面。

新建仓库，license我们可以选择MIT协议。即可帮我们在项目根目录生成MIT协议文件

2.拉取新建仓库(可选)

这一步接上面，也是可选操作，再拉取完仓库后，我们在项目根目录环境下，初始化项目工程

• 直行npm init,基本回车即可，协议与第一步一致，选择MIT协议
• 重要说明，npm包名字不能重复，我们在执行init之前，可以通过 NPM来检测是否已存在相同包名称。

package.json重要字段说明：

• name: npm包名字
• version：版本号
• description：描述
• main: 包入口文件
• module: esm格式入口文件，在我们通过import导入时，打包工具如webpack会以此为入口文件
• files: 在我们直行npm publish时候，我们希望上传哪些目录
• repository：关联仓库
• keywords：检索关键字
• author：作者
• license：协议
• bugs：bug问题反馈
• homepage：包说明首页

3. 本地包开发

我们可以采用如webpack、rollup、esbuild等作为我们的前端构建工具，将我们的源码构建打包输出。在此我发布了一个npm包 regular-verification，一个常用js正则表达式方法库，以此举例。

• 本地安装rollup,yarn add rollup
• 根目录新增rollup配置文件

• package.json添加构建命令

4. 注册npm

在我们上一步本地开发完成，通过执行build成功打包输出库文件之后，我们就要着手考虑往npm发布。在发布之前，我们首先需要注册npm账户。

5. 终端登录npm

重要说明：由于我们工作中，大多使用了淘宝镜像，所以在我们使用终端工具登录npm之前，我们要把设置的淘宝镜像，切回原npm镜像。

• npm login,输入用户名，密码即可登录。
• 查看终端当前登录用户：npm whoami
• 退出登录：npm logout

6. 发布包

在我们终端登录npm之后，我们即可发布我们构建之后的包文件

• npm publish

7. 更新包

在我们不断持续维护过程中，修改了源码，构建打包之后，我们需要修改版本号，然后即可同上面之前的步骤，登录、发布更新包。

结束语

写在最后，最近工作比较忙，写文章自然也少了一些，利用午休的时间记录了这篇文章，如果文章对看到的你有帮助，还请点赞支持下。