使用dumi搭建React 组件库并发布包

1.使用dumi搭建组件库

前情:原先在github找个别人写好的组件库研究搭建的webpack配置,结果很多问题,经过一天的修修改改才能install、build及link。研究了一天后了解到dumi,为组件开发场景而生的文档工具。具体的搭建可以查看下文的链接,就不献丑了。
dumi 文档:https://d.umijs.org/zh-CN

2.本地测试组件库是否能用

首先使用npm run build完成构建打包
再在组件库目录下执行:npm link
最后在本地的其他项目下执行:npm link [组件库的packagejs的name]

场景描述:现有项目 my-app 及 组件库 dumi-ui(package文件里的name:dumi-ui)

  • 在dumi-ui 组件库目录下执行 npm link
npm link
  • 在项目my-app 根目录下执行:
npm link dumi-ui
  • 在 my-app 引入组件库的Foo组件
import { Foo } from 'dumi-ui'

3.本地测试通过后需要unlink

  • 在dumi-ui 目录下执行
npm unlink
  • 在my-app 目录下执行
npm unlink dumi-ui

4.发布包

  • 登录(在dumi-ui目录下)
npm login

注意:设置了淘宝镜像会影响登录,如果登录不成功可以试一下

npm config set registry https://registry.npmjs.org/
  • 发包(登录成功后)
npm publish
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。