likes
comments
collection
share

如何封装一个自己的JS/TS库,并发布到NPM

作者站长头像
站长
· 阅读数 13

演示环境

Node.js:21.7.3 Npm:10.5.0

开始

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

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

启动项目

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

启动成功后如下:

如何封装一个自己的JS/TS库,并发布到NPM

然后 Ctrl + 单击 蓝色链接即可访问项目(如下图),这就是项目初始的模板:

如何封装一个自己的JS/TS库,并发布到NPM

了解结构和配置

如何封装一个自己的JS/TS库,并发布到NPM

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

如何封装一个自己的JS/TS库,并发布到NPM

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

如何封装一个自己的JS/TS库,并发布到NPM

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

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

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

如何封装一个自己的JS/TS库,并发布到NPM

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

如何封装一个自己的JS/TS库,并发布到NPM

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

编写软件库的代码

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

如何封装一个自己的JS/TS库,并发布到NPM

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

注:这些都是模板生成时的默认配置,可以不用修改(自定义部分的名称可以修改)

如何封装一个自己的JS/TS库,并发布到NPM

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

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

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

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

打开npm官网,点击 注册(Sign Up)

如何封装一个自己的JS/TS库,并发布到NPM

如何封装一个自己的JS/TS库,并发布到NPM

5、设置npm源

设置发布源(npm镜像):在项目根目录创建一个 .npmrc 文件,内容如下

如何封装一个自己的JS/TS库,并发布到NPM

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

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

6、打包构建项目

注:因为你的打包指令内有 tsc 指令,所以首次你要全局安装一下 ts(如果安装过就不用安装了)

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

打包完成:

如何封装一个自己的JS/TS库,并发布到NPM

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

如何封装一个自己的JS/TS库,并发布到NPM

7、发布到npm

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

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

npm首页说明文档

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

如何封装一个自己的JS/TS库,并发布到NPM

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

我的软件库首页如下:

如何封装一个自己的JS/TS库,并发布到NPM

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

结语

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

转载自:https://juejin.cn/post/7385778376276049961
评论
请登录