演示环境

Node.js：21.7.3 Npm：10.5.0

开始

# 1、创建一个Vite项目
npm create vite

启动项目

# 安装依赖
npm install
# 启动项目
npm run dev

启动成功后如下：

然后 Ctrl + 单击 蓝色链接即可访问项目（如下图），这就是项目初始的模板：

了解结构和配置

1、vite.config.ts： Vite 项目中用来配置构建选项和插件的配置文件

2、tsconfig.json： TypeScript 项目的配置文件

3、package.json： 定义这个项目所需要的各种模块，以及项目的配置信息，包括名称、版本、许可证、依赖模块等元数据

4、index.html： 首页入口文件

5、.gitignore： 保存git提交时所有被忽略的文件（注意：提交npm时也会忽略这里面保存的文件，优先级：在package.json中配置files来指定发布哪些文件或目录 > .npmignore > .gitignore）

注：其他的也不用了解了，都是基础的，我相信，学习这篇文章的小伙伴，对于这些基础知识应该都是了解的，不然也不会想自己写一个软件库

编写软件库的代码

1、编写自己的软件库内容，我这里就写一个简单的函数（格式化文件大小）

2、写完库了之后，我们要干什么？ 是不是要发布库到 npm 和 git（前提：这是一个git项目，不是git项目就不用发布到git），在这之前呢，我们是第一次创建这个库，所以要做一些准备工作和项目配置：

注：这些都是模板生成时的默认配置，可以不用修改（自定义部分的名称可以修改）

3、其他的配置都默认就行了，发布前我们可以自己测试一下函数是否正常

ps：写注释的好处就是在我们使用的时候有提示，如果是别人使用你的库，他又不知道你这个函数是干什么的，谁会花时间去看源码？既然使用起来这么麻烦，人家也不会用你的库（如果是自己私用的库就随你玩儿）；使用者一般都是看文档或注释，所以自己的软件库要有文档（必须）、注释，前者是必须要有！！

4、测试完毕后，发布到npm前，需要注册npm账户，操作如下（首次使用，需要注册，如果注册了可以跳过此步骤）：

打开npm官网，点击 注册（Sign Up）

5、设置npm源

设置发布源（npm镜像）：在项目根目录创建一个 .npmrc 文件，内容如下

注：有的小伙伴就喜欢指定到淘宝镜像，这种情况你会将项目发布到淘宝源上面，如果使用者没有配置npm镜像为淘宝源，那么他就会从npm官方镜像下载，就找不到你这个库，懂了吧？ 所以，我们要指定为npm官方源

ps：淘宝npm镜像站（点击可以打开） 它的程序会自己爬取npm官方的内容，所以你发布到npm官方的开放式软件库它就会自己爬过来（定时的、不能达到实时更新），你也可以手动更新淘宝镜像里面你的软件库的版本为最新（采用哪种方式看你自己）

6、打包构建项目

注：因为你的打包指令内有 tsc 指令，所以首次你要全局安装一下 ts（如果安装过就不用安装了）

# 全局安装ts（首次）
npm install -g typescript
# 打包构建项目
npm run build

打包完成：

项目根目录会多出一个 dist 文件夹，这就是打包后的代码

7、发布到npm

# 从配置文件获取 npm 源
npm config get registry
# 登录npm 账户（回车就行了，会自动打开浏览器，填个邮箱验证码就行了）
npm login
# 提交代码到 npm
npm publish

至此，你已成功将你的软件库发布到npm，恭喜！！

npm首页说明文档

ps：如果是私人库、同时你也是懒人、懒得写说明文档，可以跳过这个步骤

这样，你发布到npm或git后，软件库的首页就会展示这个文档

我的软件库首页如下：

这个样式和内容就靠你自己去美化和整理了，本期教程到这里就结束了哦！

结语

本文介绍了如何封装一个自己的JS/TS库，并发布到NPM 希望对你能有所帮助，有问题可以私信或下方留言给我