西西弗组件库预览地址

快速上手

西西弗4 基于 antd@6 版本开发

$3

npm 或 yarn 安装

``bash


npm

$ npm install @zat-design/sisyphus-react --save

yarn

$ yarn add @zat-design/sisyphus-react
`

$3

#### 方式一：自动 Tree-Shaking（推荐）

本组件库已配置 sideEffects，现代打包器（Webpack 5+、Vite、Rollup）会自动进行 tree-shaking，无需额外配置：

`tsx
// 只会打包 ProForm 相关代码，其他组件会被自动剔除
import { ProForm } from '@zat-design/sisyphus-react';
`

#### 方式二：babel-plugin-import（兼容老项目）

如果使用 Webpack 4 或需要更精确的控制，可使用 babel-plugin-import：

`js
[
'babel-plugin-import',
{
libraryName: '@zat-design/sisyphus-react',
camel2DashComponentName: false,
libraryDirectory: 'es',
style: false,
},
]
`

在 umi 框架下同时配置 antd 按需加载时，需要配置别名：

`js
extraBabelPlugins: [
[
'babel-plugin-import',
{
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
},
],
[
'babel-plugin-import',
{
libraryName: '@zat-design/sisyphus-react',
camel2DashComponentName: false,
libraryDirectory: 'es',
style: false,
},
'@zat-design/sisyphus-react'
],
]
`

$3

`tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ProForm } from '@zat-design/sisyphus-react';

const App = () => {
return (
columns={[
{
type: 'Input',
label: '姓名',
name: 'name',
rules: [{ required: true, message: '请输入姓名！' }],
},
]}
/>
);
};

createRoot(document.getElementById('root')!).render();
`

开发指南

$3

`bash
yarn install
yarn start
`

$3

`bash
yarn test
yarn test:coverage # 带覆盖率
`

$3

`bash


1. 构建（生成 es/lib/dist 目录）

yarn build

2. 发布到 npm

yarn release # 正式版
yarn release:beta # beta 版本
`


2. 执行发布（使用域账号登录）：
`bash
npm publish
``

技术栈

- React 18.3+ / React 19
- Ant Design 6.x
- TypeScript
- Less