Redefy
Edit page
开发指南
介绍快速上手安装引入按需引入CDN 引入更新日志
基础组件
表单组件
交互组件
展示组件

安装

# 使用 yarn
yarn add redefy
# 使用 npm
npm i redefy -S

引入

最简单舒心的方式是先在项目的入口文件中引入全部组件的样式：

import 'redefy/es/index.css';

然后就可以在项目任意地方引入组件了：

import { Button } from 'redefy';

注意：redefy 默认支持基于 ES module 的 tree shaking，对于 js 部分，直接引入import { Button } from 'redefy'也会有按需加载的效果。

按需引入

如果比较在意应用体积，对于 css 部分也要按需引入的话，可以这样写：

import { Button } from 'redefy';
import 'redefy/es/button/style'; // 或者 antd/es/button/style/raw 加载 less 源文件

按上面这个写法，如果要引入 n 个组件就得写 2n 条 import 语句，实在太累。如果你使用了 babel，那么可以用 babel-plugin-import 来进行自动按需加载：

# 安装插件
yarn add babel-plugin-import -D
// babel 配置
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "redefy",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}
// 直接引入组件 js 即可，babel-plugin-import 会帮忙转换
import { Button } from 'redefy';
      ↓ ↓ ↓ ↓ ↓ ↓
import Button from 'redefy/es/button';
import 'redefy/es/button/style';

CDN 引入

如果只是想写点简单的 demo，那使用redefy最简单的方式是在 html 文件中引入 CDN 链接， 然后可以通过全局变量redefy获取到所有组件：

<!-- 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/redefy@1.0.0/dist/redefy.css">
<!-- react -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- redefy -->
<script src="https://cdn.jsdelivr.net/npm/redefy@1.0.0/dist/redefy.min.js"></script>
<div id="root"></div>
<script>
  // 渲染一个 Button
  ReactDOM.render(
    React.createElement(redefy.Button, null, 'Hello, world!'),
    document.getElementById('root')
  );
  // 弹出一个 Toast
  redefy.Toast.info('infooo');
</script>