smalllb v0.1.2

欢迎来到我的 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

代码检查 eslint TODO

npm 上传钩子 TODO

github 上传钩子 TODO

自动化部署 CI/CD TODO