0.1.2 • Published 3 years ago
claus-aka v0.1.2
claus-aka component library
安装最后已经发布的组件库来试试
npm install claus-aka --save
使用
// 加载样式
import "claus-aka/dist/index.css";
// 引入组件
import { Button } from "claus-aka";
课程亮点
- 🔥typescript with React Hooks
- ⛑️ 使用 react-testing-library 完成单元测试
- 📚 使用 storybook 本地调试和生成文档页面
- 📚 使用 react-doc-gen 自动生成文档
- 📦 使用第三方库扩充组件-(react-fontawesome, react-transition-group)
- 🎉npm publish,husky 提交发布前验证,travis CI/CD 集成,发布文档站点等
一些本地开发命令
// 启动本地环境
npm run stroybook
// 跑单元测试
npm test
npx jest **.test.tsx
// build可发布静态文件
npm run build
// 发布到 npm
npm run publish
// 当前项目执行
// 创建一个全局的短链接,链接到当前项目目录
npm link
// 使用项目执行
// 引用这个短链接
npm link claus-aka
使用例子
- claus-aka 包项目
npm link
- claus-aka-test 使用包项目
npm link claus-aka
会遇到一下问题
Invalid hook call. Hooks
原因是因为 claus-aka-test 在使用 link 来的包时,被 link 包内使用的 react 是包项目内的 react,和使用包项目依赖的 react 不是一个,所以会报警告
解决方式
// claus-aka npm link ../claus-aka-test/node_modules/react
这样就可以是同一个 react 了
发布包
注册账号
npm whoami 检查是否登陆
npm adduser 创建账号
npm login 登陆账号
// 发布前执行
package.json
"scripts": {
// "prepublish": "npm run build-lib" // 即将废弃
"prepublishOnly": "npm run build-lib" // 发布前要做的事
}
"files": [ // 表示要把哪些资源上传到npm仓库上去,不写默认使用 .gitignore 内的信息
"lib"
],
npm publish 发布包
注意事项
解决用户安装我们的包时安装了两份 react 和 react-dom 库
用户在安装时,该处声明的依赖不会被安装
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
删除 dependencies 内的两个依赖
"react": "^17.0.1",
"react-dom": "^17.0.1"
然而开发时还要使用,所以将删除的引用,重新添加到 devDependencies 中
"devDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
生成静态文档
npm run build-storybook
// 生成 storybook-static 目录
发布集成
0.1.2
3 years ago