使用npm发布自己开发的工具包

简介: 介绍了如何使用npm发布自己开发的工具包笔记的过程,以及如何更新你的npm包版本

1、注册登录NPM账号

  • 注册一个npm账号,地址:npm注册地址
  • 如果你已经有了npm账号就进行登录,地址:npm登录地址
  • 登录时还需要你输入npm发给你邮箱的一次性密码

QQ截图20220627104614.png

  • 进入主界面会给你一个2FA双因子验证的提示,你可以忽略

QQ截图20220627104851.png

2、创建NPM工程

  • 1、新建一个文件夹(genius-storage)
  • 2、初始化npm工程,生成一个package.json的包管理配置文件
npm init  
// or
npm init -y
  • 3、进入genius-storage文件根目录,可以看到package.json包管理文件,这里你可以根据你的情况,做相应的修改。
{
  "name": "genius-storage", // 包名,必须要独一无二
  "version": "1.0.0", // 版本号
  "author": "geniusman", // 作者
  "description": "A user-friendly browser cache tool", // 描述信息
  "keywords": ["localStorage",
    "sessionStorage",
    "cookie",
    "utils"], // 关键词,提升SEO
  "repository": {
    // 代码托管位置
    "type": "git",
    "url": "https://github.com/geniusmanyxh/genius-storage"
  },
  "license": "ISC", // 许可证
  "homepage": "https://www.geniusman.top/#/browseBlog?id=70", // 包的主页或者文档首页
  "bugs": "https://github.com/geniusmanyxh/genius-storage/issues", // 用户问题反馈地址
  "main": "index.js", // 入口文件
  "scripts": {
    // 存放可执行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    // 运行依赖
  },
  "devDependencies": {
    // 开发依赖
  }
}
  • 4、开始编写你的工具
// GStorage.js 具体的实现代码文件
/**
 * @description 根据使用者传入的存储类型以及对应的配置,返回对应存储类型的实例以及方法
 * @param {String} storageType 选择存储类型:local | session  | cookie
 * @param {Object} storageOptions 可选配置参数
 * @returns 返回一个可以操作的(LocalStorage | SessionStorage | Cookie)实例对象
 */
 export const GStorage = (storageType, storageOptions) => {
  你的代码逻辑,我这里太多了,就用省略号了...
 }

// index.js 入口文件
import { GStorage } from './GStorage.js'

export { GStorage }

3、将NPM工程代码上传GitHub

  • 1、在GitHub上创建一个代码仓库genius-storage
  • 2、使用git上传你的本地代码
git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/geniusmanyxh/genius-storage.git
git push -u origin master

4、发布你的NPM工程到NPM官网

  • 1、检查 npm 镜像地址,如果是淘宝镜像地址,则需要改回 npm 镜像地址
// 查看npm镜像地址
npm config get registry

// 如果是:https://registry.npm.taobao.org/
// 切换npm镜像源,为npm官方的镜像地址
npm config set registry https://registry.npmjs.org/
  • 2、在终端中切换到项目目录下,运行登陆命令,之后按照终端提示输入用户名、密码等信息即可
// 登陆
npm login

// 控制台会提示输入相关信息
Log in on https://registry.npmjs.org/
Username:  // 用户名
Password: // 密码
Email: (this IS public) // 邮箱
Enter one-time password: // 如果之前做过 双因素身份验证 (2FA),需要生成一次性密钥
Logged in as xxx on https://registry.npmjs.org/.

QQ截图20220627114700.png

  • 3、运行npm发布命令
// 发布命令
npm publish

QQ截图20220627115355.png

  • 4、发布成功后,就可以登陆 npm 网站,查看发布包的情况了

QQ截图20220627105152.png

QQ截图20220627115725.png

5、测试使用你发布的NPM包

  • 1、安装你发布的工具包
npm i genius-storage
  • 2、安装完成后可以在你的node-modules目录下找到以下文件

QQ截图20220627120117.png

  • 3、项目使用举例:
import { GStorage } from "genius-storage";

const gLocal = GStorage('local')

gLocal.setFun('key',{value:1})
gLocal.getFun('key')

6、更新你发布的NPM工程

  • 1、如果你更新了你的工程,需要重新发布,记得要commit你的代码,不然会报错
// 自动更改版本号,并且commit
// npm version xxx

// 控制台会返回下一个小版本号 如v1.0.0 ===> v1.0.1
npm version patch

// 重新发布
npm publish
  • 2、根据你所修改的功能和版本差距,来修改你的版本号
// patch:补丁号,修复bug,小变动,如 v1.0.0->v1.0.1
npm version patch

// minor:次版本号,增加新功能,如 v1.0.0->v1.1.0
npm version minor

// major:主版本号,不兼容的修改,如 v1.0.0->v2.0.0
npm version major
相关文章
|
3月前
|
资源调度 JavaScript 索引
Vue2开发插件并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`,并将其发布到npm,包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。
Vue2开发插件并发布到npm
|
3月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
75 1
|
6月前
|
前端开发 JavaScript 数据安全/隐私保护
从0到1开发一个自己的npm包完整过程
创建自己的 npm 包涉及六个步骤:1) 注册 npm 账号;2) 使用 `npm init` 初始化项目,确保 package.json 的 name 唯一且 private 为 false;3) 开发项目,可封装 UI 组件、函数库或命令行工具;4) 本地调试,通过 `npm link` 在项目中测试;5) `npm login` 登录账号,可能需切换至官方仓库;6) 使用 `npm publish` 发布项目。注意版本号递增,无意义的包不建议发布。
493 2
从0到1开发一个自己的npm包完整过程
|
4月前
|
JavaScript 开发工具 数据安全/隐私保护
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
106 0
|
6月前
|
JavaScript iOS开发 MacOS
掌握NVM、NRM和NPM:Node.js开发的利器
掌握NVM、NRM和NPM:Node.js开发的利器
212 0
|
6月前
|
资源调度 JavaScript 开发工具
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
307 0
|
6月前
|
缓存 前端开发 开发工具
13个NPM快速开发技巧:提升前端开发效率
13个NPM快速开发技巧:提升前端开发效率
190 0
|
JavaScript API 开发工具
如何从0开发一个Vue组件库并发布到npm(下)
如何从0开发一个Vue组件库并发布到npm(下)
110 0
|
JavaScript
如何从0开发一个Vue组件库并发布到npm(上)
如何从0开发一个Vue组件库并发布到npm(上)
157 0
|
JSON JavaScript 前端开发
小满 前端埋点SDK 带你 从0 开发 并且发布npm
使用rollup 应为 rollup打包干净,而webpack非常臃肿,可读性差,所以rollup非常适合开发SDK和一些框架,webpack 适合开发一些项目
500 0
小满 前端埋点SDK 带你 从0 开发 并且发布npm