发布组件到npm上面

心已赠人 2023-02-18 10:56 3阅读 0赞

### 文章目录 ###

*  前文
 *  一、项目准备
 *  二、npm发布
 *   *  1. 发布步骤
     *  2. 一些常见的错误
 *  三、持续集成
 *  四、删除包
 *  五、总结

# 前文 #

npm包管理工具前端同学应该不陌生了，npm平台上有大量的优秀包，我们只需要简单几行命令就能下载下来我们想要的东西，不用到处求种，而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去，方便项目中使用和其他人使用，本文介绍如何将一个组件发布到npm平台上去。

> 步骤非常简单，请按照笔者的步骤一步一步走，操作慢一点的话俩个小时之内也搞定了。部分坑笔者已踩过，并留下了解决方案，欢迎补充。

# 一、项目准备 #

发布到npm平台的包，是一个项目工程，跟我们平时工作中的项目类似，应该有完整的一套构建，开发，测试，打包压缩等步骤，所以应该把这个包当成一个项目来对待。  
具体文件目录结构可参考：

wd-canvas2image
    ├── example                   # 存放demo的代码，帮助他人了解你的插件如何使用
    │    ├── src
    │    │    ├── wdCanvas2Image.js   
    │    │    └── index.js
    │    └── index.html            # 示例页面
    ├── rollup.config.js           # rollup配置文件 // 笔者用的rollup，你可以自行选择webpack等
    ├── index.js                  # 你的插件入口文件
    ├── package.json        # 你的插件信息 // 可以通过npm init生成然后补全信息
    ├── HISTORY.md			# 版本更新记录            
    └── README.md			# 写一些说明

这里要注意的点：

1.  原文件：项目原文件在src下，原文件用ES6编写。原文件不可直接使用，需要打包编译之后才能使用。
2.  编译：编译方式有很多种，笔者使用的rollup。
3.  demo：项目里有个example文件夹，里面是项目示例代码，本地开发的时候跑的项目；也有的包里面是docs文件夹，文档形式介绍。
4.  测试：有的包本地开发的时候会有测试脚本，本地会有一个test文件夹，用于存放测试脚本。  
    项目完成之后，需要添加一个入口文件index.js，将你的组件导出：

> 也可以在编译的时候直接就编译成index.js。笔者就是这么做的

***
    ***
    var Index = WDCanvas2Image;
    exports.default = Index;

需要改一下package.json里面的配置文件：  
参考文档：[https://docs.npmjs.com/files/package.json][https_docs.npmjs.com_files_package.json]

{ 
      "name": "wd-canvas2image",
      "version": "0.0.12",
      "author": "Brian<csdnwuxiaodi@qq.com>",
      "description": "将canvas转换为image的实用包",
      "keywords": [
        "canvas",
        "image",
        "function",
        "tools"
      ],
      "repository": { 
        "type": "git",
        "url": "https://github.com/wudi98/wudi_canvas2image.git"
      },
      "homepage": "https://github.com/wudi98/wudi_canvas2image",
      "bugs": { 
        "url": "https://github.com/wudi98/wudi_canvas2image/issues"
      },
      "main": "src/index.js",
      "scripts": { 
        "build": "rollup -c"
      },
      "dependencies": { 
        "html2canvas": "^1.0.0-rc.5",
        "wd-canvas2image": "^0.0.10"
      },
      "license": "MIT"
    }

上述代码唯一需要介绍的就是“license”。

> 这个 license 就是开源许可说明，各大组织设立了为代码开源许可的规范文档，当作者声明此文档类型时，他人必须遵守该文档类型的规范。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
> 详细介绍可看：[七种开源许可证][Link 1]

// 不会被npm忽略的文件
    package.json
    README (and its variants)
    CHANGELOG (and its variants)
    LICENSE / LICENCE
    
    // 一定会忽略的
    node_modules
    .*.swp
    ._*
    .DS_Store
    .git
    .hg
    .npmrc
    .lock-wscript
    .svn
    .wafpickle-*
    config.gypi
    CVS
    npm-debug.log

# 二、npm发布 #

## 1. 发布步骤 ##

项目已经准备好了，接下来可以着手发布了。首先npm上注册账号，别忘了去邮箱验证。  
注册地址：[https://www.npmjs.com/][https_www.npmjs.com]  
然后输入：

npm adduser

接下来会以问答的形式向你了解你的用户名、密码以及公开的邮箱  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]  
之后输入

npm publish

然后看到进度条走，之后组件发布成功，可以到npm上搜索自己的包了。

> 注意点：  
> 1.每次提交版本号都要比上次的高  
> 2.如果提示包不能为private，需要执行下面的发布方式：npm publish --access public

最后说一下版本管理。

一般来说版本分成三部分：A.B.C

> A表示大版本号，一般是项目较大改动的时候修改。A为0的时候，表示项目处于开发阶段。  
> B表示功能更新，或者项目模块改动的时候增加。  
> C表示小改动，如修bug。

## 2. 一些常见的错误 ##

1.  no\_perms Private mode enable, only admin can publish this module  
    这是因为镜像设置成淘宝镜像了，设置回来即可

$ npm config set registry http://registry.npmjs.org

1.  npm publish failed put 500 unexpected status code 401  
    一般是没有登录，重新登录一下 npm login 即可
2.  npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?  
    包名被占用，改个包名即可。最好在官网查一下是否有包名被占用，之后再重命名
3.  you must verify your email before publishing a new package  
    邮箱未验证，去官网验证一下邮箱

# 三、持续集成 #

一般来说你会看到一些项目README.md里面有一些icon如：  
![clipboard.png][]

这些icon看起来很牛逼，但也不只是装逼用的。

持续集成(Continuous integration)的目的，就是让产品可以快速迭代，同时还能保持高质量。它的核心措施是，代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。

每个icon都表示一个功能，这里不多做介绍。

# 四、删除包 #

请点击查看：[怎样删除npm里已经发布的包？][npm]

# 五、总结 #

经过上述操作，就可以完成了向npm平台发布一个包的过程，发布到npm的组件要持续维护。否则其他用了你的插件的人会被你坑的很惨的。。。。。

[https_docs.npmjs.com_files_package.json]: https://docs.npmjs.com/files/package.json
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619143448954.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[Link 1]: https://www.jianshu.com/p/86251523e898
[https_www.npmjs.com]: https://www.npmjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619145643130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[clipboard.png]: https://img-blog.csdnimg.cn/20200617154416726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[npm]: https://segmentfault.com/q/1010000009389901