Jenson的个人博客
类型
状态
日期
文章链接
概览
标签
分类
图标
密码
创建时间
Aug 9, 2023 10:08 AM
最近更新时间
Aug 14, 2023 05:48 PM

前言

前端开发做了很久，各式各样的工具包和组件库也用了很多，但是依然还是希望有一款属于自己的工具包，可以自定义自己想要功能，更方便自己的开发，也是为了提高自己的能力，于是便想着从0到1开发一个属于自己的npm工具包。

创建项目

最近开发一直使用 Vite+Vue3 这里我依然使用 Vite 来创建项目，你也可以直接使用 npm init 来创建 package.json 文件
notion image
依次选择 Others create-vite-extra library TypeScript 这样，基本项目就算建完了。
这个项目默认有一个函数，用来记录按钮的点击次数并显示在按钮上
项目结构如下
  • src 为测试的代码目录
  • index.d.ts ts类型声明文件
  • index.html 测试用的前端页面
  • package.json 包配置文件
  • vite.config.ts vite 配置文件

打包配置

修改 package.json 文件，默认是私有包，但是npm上传私有包需要收费，删除原有的 "private": true 并修改版本号
修改 vite.config.ts 文件中的名字为你想要的名字

打包上传

如果需要发到npm仓库，需要先注册账号（注册完成的可以掠过这一步）。
  • 下载项目依赖
  • 根据需要设置 registry 源，也许企业有需要发布私有包的需求
  • 登录 npm ( 如果已登陆可以忽略这一步 )
根据提示输入帐号密码即可
  • 发布到 npm
发布成功！
使用前端技术实现生产环境页面的自动更新监测让Windows下永远不会嗝屁的守护