如何发布自己的npm包

ゝ一纸荒年。 2022-03-15 12:44 373阅读 0赞

# 发布自己的npm包 #

## 前言 ##

做前端开发的都知道现在要是引入第三方的框架或者UI库或者其他功能模块的时候一般都是选择npm安装，好处就不一一说明了，这里就为大家说明一下如何在npm上发布属于自己的npm包

## 前提 ##

*  本地安装node开发环境
 *  拥有自己的npm账号 若无请在 https://www.npmjs.com/ 上注册

这里默认前面两个条件都已近满足了

## 本地登录npm并配置基本信息 ##

mac下打开终端windows打开cmd输入

npm login

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]  
登录成功之后cd到一个文件夹下，此处是cd extract\_cn文件夹下，然后下载基础的配置文件，如下图所示，我在这里就是一直回车即可，或者等生成之后也可以自行到package.json文件中去修改配置相应的信息

npm init

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]

## 开发功能 ##

上面两步做完之后就可以开发本地的通用功能模块了。  
比如在这里我新建了一个index.js文件，文件内的功能是export 一个字符串  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 2]  
demo写完之后就可以直接发布了

## 发布npm包 ##

在当前项目更目录路劲下运行下面命令

npm publish

npm 就会根据package.json中的配置信息将开发的功能模块进行打包并发布到npm平台上  
比较重要的是版本号和包的名字，注意发布之前最好在npm上查一下自己的包名，不能重合，如果重合的话就会出现发布失败，发布的时候有一些小坑，后面在其他文章会详细介绍并给出解决方案。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 3]  
发布成功之后就会显示出上面的界面，版本号可以直接看见，也可以直接去npm上查看自己刚刚 发布的包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 4]

## 使用发布的npm包 ##

如上操作完之后我们就可以在别的工程上引入安装刚刚发布好的包，并使用其中的功能

此处我在别的工程上运行

npm i extract-zh

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 5]可以看到另一个工程中可以成功下载刚刚发布的npm包在package.json中的dependencies也会增加extract-zh的依赖，下载成功之后就可以使用extract-zh包所提供的功能了。  
在package.json中的script中增加一个命令，运行本地的test.js文件，test.js引入extract-zh  
然后运行改文件，就可以打印出我们在extrac-zh暴露出来的字符串了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 6]

## 删除包 ##

刚刚的只是一个测试包，测试验证完之后删除掉比较好,下面说下怎么删除自己的npm包

npm --force unpublish extract-zh

删除要用force强制删除。超过24小时就不能删除了。自己把握好时间。  
![在这里插入图片描述][20190302192432504.png]  
如上所示，就删除成功了,也可以去npm上验证下包是否还存在  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 7]  
如上图所示，删除之后，npm上就没有自己发布的npm包了。

至此一个npm包从发布到删除的流程就是这样了。哪些看上去高大上的npm包，以后自己也能去写一写，把一些通用的，和业务无关的一些功能发布上去，造福广大开发者。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]: /images/20220315/900bcc3467104349aa8d93bfa8299918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220315/7097418cede3447fbaea3cec545aa5c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 2]: /images/20220315/cc2d646dc2b649f08697b67c17ca117a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 3]: /images/20220315/3f2a232e8d214c308c32f13fe5d89730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 4]: /images/20220315/f1ebd96570b949beb41911074429fbe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 5]: /images/20220315/d4eff26aed504d7fbba8c401560154a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 6]: /images/20220315/4fdb7efedfeb49e6aea671b0265a34cd.png
[20190302192432504.png]: /images/20220315/8665c42d88614cc49b3bebcdd95f030b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 7]: /images/20220315/ade9f91da35d419fb06e630cc75febff.png