西西弗组件库预览地址

快速上手

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

安装

npm 或 yarn 安装

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

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

按需加载

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

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

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

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

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

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

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

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'
  ],
]

使用示例

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

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

createRoot(document.getElementById('root')!).render(<App />);

开发指南

本地开发

yarn install
yarn start

运行测试

yarn test
yarn test:coverage  # 带覆盖率

组件库打包发布

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

# 2. 发布到 npm
yarn release        # 正式版
yarn release:beta   # beta 版本

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

npm publish

技术栈

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