Skip to content

ccj-007/react-speed-ui

Repository files navigation

react-speed-ui

极速组件库 : 速度不差、体积小巧、追求新技术的组件库

npm npm version

特色:

  • 50 多个轻量组件开箱即用 📟
  • TS 支持 💎
  • 主题切换 💱
  • 命名隔离 🔞
  • 卡通风 🔫
  • 单元测试 📧
  • 支持按需加载 🎉
  • storybook + vite 构建文档 👍
  • 命令行直接生成组件模板

使用场景:

  1. 用于快速搭建个人应用📨
  2. 有时候写个DEMO,对样式和组件有要求,那么再适合不过了

启动 storybook 项目

npm run storybook

如何安装

使用 npm

npm i react-speed-ui -S

使用 yarn

yarn add react-speed-ui

SDK 引入

<link rel="stylesheet" href="./node_modules/react-speed-ui/dist/css/speed.min.css">
<script type="text/javascript" src="./node_modules/react-speed-ui/dist/lib/speed.min.js"></script>

使用 CDN (目前暂不支持)

快速使用

  1. 全量引入
import { Button } from 'react-speed-ui';
import 'react-speed-ui/dist/css/speed.min.css';

const App: React.FC = () => (
  <>
    <Button btnType='danger'>danger button</Button>
  </>
);

export default App;
  1. 按需引入
  • esm 导入
import Button from 'react-speed-ui/dist/esm/components/Button';
import 'react-speed-ui/dist/css/components/button.css';
  • cjs 导入
const Button = require('react-speed-ui/dist/lib/components/Button').default;
require('react-speed-ui/dist/css/components/button.css');
  1. 自动化按需导入
  • 原目录结构无法实现 babel-import-plugin 的插件自动导入,所以自己手动封装了 babel 插件来实现适合本组件库的按需导入 js、css,同时也具备了扩展性。虽然 es 6 的静态编译带来了 tree-sharking 的摇钱树优化,对 css 文件是无法实现的,在 js 中一些异常的对象变量的引用传入函数中、类的语法在 babel 中的转化也会导致副作用的生成,不能使组件被完全优化。
import { Button } from 'react-speed-ui';
ReactDOM.render(<Button>xxxx</Button>);

           

import Button from 'react-speed-ui/dist/esm/components/Button';
import 'react-speed-ui/dist/css/components/button.css';
ReactDOM.render(<Button>xxxx</Button>);

如何配置(目前暂时未发布到 npm)

git clone [email protected]:ccj-007/babel-plugin-idea.git

cd ./import-plugin/plugin/plugin.js

将此文件拷贝到你的项目中并新建 babel.config.js 配置如下:

module.exports = {
  "plugins": [
  [
    require('../babel-preset-import-plugin'),
    {
      "libName": "react-speed-ui",  //组件库名
      "stylePath": "dist/css/components", //样式路径
      "styleOneLower": true,  //样式文件首字母是否大写
      "componentPath": "dist/lib/components", //组件文件路径
    },
  ],
];
}

在 create-react-app 配置需npm run eject, 然后在 webpack.config.js 配置 babel-loader,传入对应的 plugins 配置,某些情况下模块解析失败,注意默认配置了缓存,可以关闭 cacheDirectory 或在 node_modules 下.cache 手动删除缓存即可恢复。