Wizard UI 是基于 React 和 Typescript 开发的 UI 组件库。
安装和使用
wizard-ui 提供了一系列的组件用于开发，仅仅只需要安装就可以使用。
# install
yarn add wizard-ui
# css loader
yarn add --dev style-loader css-loader
# react bootstrap font dev
yarn add --dev url-loader file-loader
需要设置 webpack config:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
use: ['file-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: 'url-loader?limit=100000'
}
在工作场景中，可以在使用 Create React APP 后直接引用：
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'wizard-ui';
ReactDOM.render(
<Badge count={20} status="success"/>,
document.getElementById('root')
);
全局样式
import 'wizard-ui/lib/style/index.css';
单元测试
jest + enzyme
单元测试调试
由 majestic 提供可视化界面做单元测试的补充。
打包文件分析
upload to https://webpack.jakoblind.no/optimize/#
待做