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