# sw-ui

**Repository Path**: muand/sw-ui

## Basic Information

- **Project Name**: sw-ui
- **Description**: 自定义的 react 组件库。
typescript+react+less
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-07
- **Last Updated**: 2022-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### 介绍
这是一个可以用于 私有化的 react 组件库



#### 软件架构
1. 使用 typescript
2. react
3. storybook
4. @svgr/cli 把 svg转换为 react 组件

#### 安装教程

1.  yarn
2.  yarn compile 打包
3.  yarn dev 进行开发
4.  进入到 dist 里面  npm link   (只需要一次就可以了，下次不用)
5.  卸载 npm unlink 
6.  在package.json 里面加入， "@mannymu/sw-ui":"latest"

#### 文件夹说明
1. dist 为开发时候，实时的打包
2. release 为打包后的结果
3. scripts 里面是一个 package 的模板

#### 使用说明
1.  在其他项目  npm link xxmui  (注意这里的 xxmui 是  package.json 里面的 name )
2.  import {Button} from "xxmui"
3.  卸载 npm unlink xxmui




#### 参考项目
1. [react-use](https://www.npmjs.com/package/react-use)
2. [dt-react-components](https://www.npmjs.com/package/dt-react-component)
3. [storybook](https://storybook.js.org/docs/react/get-started/introduction/)
4. svg 图标处理参考 [知乎](https://zhuanlan.zhihu.com/p/49162996) ， [github](https://github.com/one-react/icons) , [官方文档](https://react-svgr.com/docs/custom-templates/)
5. [dumi文档](https://d.umijs.org/zh-CN/guide)


### 常见问题
1. npm link 后引入组件后，报 hooks 错误：  解决办法,在webpack 里面的 alias 中加上 react: path.resolve('./node_modules/react')
    参考 [github](https://github.com/facebook/create-react-app/issues/6953)
    
2. 报错： 
 Error: Invariant failed: You should not use <Route> outside a <Router>
  解决办法： 在webpack 里面的 alias 中加上 'react-router-dom': path.resolve('./node_modules/react-router-dom')
  参考: [stackoverflow](https://stackoverflow.com/questions/55552147/invariant-failed-you-should-not-use-route-outside-a-router)

3. 报错：
    Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported
    解决办法：在webpack 里面的 alias 中加上 'react-dom': path.resolve('./node_modules/react-dom')
     参考: [stackoverflow](https://stackoverflow.com/questions/61491342/when-importing-from-a-library-invariant-failed-you-should-not-use-route-outs)

4. antd 弹窗无法正常关闭
     解决办法：在webpack 里面的 alias 中加上  antd: path.resolve('./node_modules/antd')