从零开始写一个npm包及上传

时间:2023-03-08 16:09:33

  最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传。

  该篇文件只记录一个大概的流程,一些细节没有记录。

  tips: 这篇文章基于Vue.js 和 github

 

预备工作

  1、首先你需要npm账号和github账号(个人用的是github)。

    注册账号都比较简单,个人就不再描述。

  2、将npm账号和github账号关联,这样才能找到你的代码。

    在npm里面找到你的个人设置(Profile Settings),在Profile中找到GitHub Username,填入你的github账号即可

  3、在npm中验证你的邮箱

    如果你没有验证邮箱,npm官网中会提示你去验证邮箱。

    如果没有验证邮箱,后期在npm publish 发布的时候会一直报: error you must verify your email before publishing a new package: xxx

  

 准备工作做完之后,既然要上传,就需要npm包,下面我们先来写一个npm包

 

写一个npm包

  1、在 gtihub 上 建立一个项目vue-test,然后clone到本地。

    这里无关本文,暂不详细说明

  2、在clone下来的项目vue-test中采用vue-cli快速构建一个项目。

    一般npm包都是存放在lib文件夹下。我们为了在本地测试。所以我们先整体的构建一个vue项目,后期再整理上传目录。

    vue-cli构建方法暂不详细说明。

  3、开始写代码。

    不管你这个npm包是一个功能还是一整个模块,都需要将相关的文件单独存放,方便后期整理上传目录。

    在index.vue中引入将要上传的组件或者js,然后npm run dev在本地测试。

    tips:

      1、如何写一个模块包或者功能,不详细描述,跟平常写代码一样,你想用啥语言就用啥,本文用Vue.js 只是示例。

      2、只是要注意将要上传的文件进行单独存放。

  4、添加 LICENCE 文件,说明对应的开源协议。

    新增一个文件名为 LICENCE. 的文件


Copyright (c) <year> <copyright holders>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

修改Copyright (c) <year> <copyright holders>中的 year 和copyright holders 即可。

  5、添加README.md文件

    描述npm包的使用方法

  6、添加 .gitignore 文件

    上传代码到仓库的时候,会忽略这个文件中写入的文件,文件中怎么写,暂不详细描述。

  7、整理上传目录

    以上文件都存在之后,功能也写完了,现在就要开始整理代码目录了。

    整理之前,我们先上传代码到github上备份下,然后再整理上传。

    删除vue项目中一些不必要的,只剩下功能组件或者文件。注意,如果功能文件或者组件中有引入其他文件,记得要修改文件路径。

    整理完成后,上传代码到github仓库。

  

 npm包写完了,那就上传吧。

上传

  在命令窗口中,cd 进入你的项目文件夹。

  1、npm login

  输入你的 npm 用户名、密码 和邮箱后,会提示:

Logged in as bala001 on https://registry.npmjs.org/.

  登录成功。

  2、npm publish

  发布npm包。如果报错的话,各位就是百度对应的错误解决办法吧。后期再来列出几个常见的错误。

发布成功之后,自然要更新了。

更新

  npm version <update_type>

  update_type有三个参数:

    patch:补丁。比如更新前的版本是1.0.0,npm version path 回车更新后的版本为: 1.0.1

    minor:小修改。比如更新前的版本是1.0.0,npm version minor 回车更新后的版本为: 1.1.0

    major:大改。比如更新前的版本是1.0.0,npm version major 回车更新后的版本为: 2.0.0

  版本更新之后,npm publish发布。

npm包发布成功,你就可以在你的npm package中找到你发布的包了,如你需要在其他项目中引用,直接npm install 包名,引入即可。

常见错误及解决办法

  1、未验证邮箱

error code E403
error you must verify your email before publishing a new package:

  该错误是因为没有验证邮箱。

  解决办法:

  在npm官网:https://www.npmjs.com/ 绑定邮箱之后,需要进行绑定验证,只有验证通过了,npm账号才有效。

  2、private 设置问题

error Remove the 'private' field from the package.json to publish it.

  解决办法:

  在package.json文件中,有这样一行代码: "private": true, 改为false即可