README
欢迎来到我的 smalllb 组件库
这个 UI 组件库是 通过 React + Hooks + TypeScript + Storybook 联合打造的 一起开始奇妙之旅吧~
安装
npm install smalllb -S
主要功能组件
- Button
- Icon
- Input
- AutoComplete
- Menu
- Transition
所需技术栈
- React With Hooks
- TypeScript
- Sass
常见问题及注意事项汇总
官网创建StoryBook
- 安装
npx sb init
注意: npm run storybook 运行不了 出现
Error: You gave us a visitor for the node type StaticBlock but it's not a valid type, 我们需要 删除 yarn.lock 文件，重新安装
- remove yarn.lock 文件
- 执行
yarn操作
参考 官网issues : https://github.com/storybookjs/storybook/issues/12893
安装 node-sass 报错问题
#切换到淘宝镜像安装 nrm
npm install -g nrm
cnpm install node-sass
本地使用及测试组件库
可以通过
npm link 本地使用
组件方项目操作(component-project)
- 添加导出的内容
// packpage.json
{
// ...
"main": "build/index.js",
"module": "build/index.js",
"types": "build/index.d.ts",
// ...
}
- 在 组件库代码 创建 软链接
# 创建一个全局的短链接，链接到当前项目目录
npm link
- 同步两者之间的 React
由于存在两种不同的 React 版本会报错 详情参考 参考: https://reactjs.org/warnings/invalid-hook-call-warning.html
npm link ../use-component-project/node_modules/react
使用项目方操作(use-component-project)
- 在 react 与 组件库 代码 进行连接
npm link component-project
- 手动添加依赖
// package.json
{
"dependencies": {
"vikingship": "0.1.0"
}
}
- 使用
import { Button } from 'xxx'
import 'xxx/indes.css'
export default function App(){
return (
<Button>btn</Button>
)
}
将项目发布到 npm 上
- 将 npm 设置为 npm 默认源
# 切换为默认源
npm config set registry https://registry.npmjs.org
# 切换为淘宝源
npm config set registry https://registry.npm.taobao.org
- npm 账号操作
# 注册
npm adduser
# 登录
npm login
# 查看登录信息
npm whoami
- 发布
如果是第一次注册，需要对邮箱进行注册确认，在这一方面采坑好久~。手动狗头
npm publish