vite编写并发布一个react组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vite编写并发布一个react组件相关的知识，希望对你有一定的参考价值。
参考技术A 听说vite已经到了2.x版本，赶紧打开文档看了看输入项目名称后，选择react回车、再选中react回车，ok，生成的目录结构如下
打开vite.config.js，默认配置如下：
那么我们按照库模式修改配置，打包文件输出到lib/dist目录下
库入口是components目录下的index.jsx文件，该文件用于导出库组件，如：
那么我们需要写个button组件
接下来就可以打包组件了，
结果如下图：
打包后生成了两个文件
出现下图显示表示登录成功。什么，还没npm账号？作为新时代农民工，npm账号必须注册一下（此处省略）
我们要发布的包在lib目录下，那么在该目录下添加package.json文件
那么我们进入到该目录
激动人心的时刻到了，输入发布命令
结果... ...
什么，竟然报错了，好吧，原来是镜像搞的鬼
切换回原镜像
OK，重新yarn publish
发布后，我们就可以使用这个包了，就在刚才的项目里引用试试
到src/app.jsx文件里引用这个组件
回到命令行，启动项目
以上是关于vite编写并发布一个react组件的主要内容，如果未能解决你的问题，请参考以下文章