@gzued/antd-compiled

预打包的 antd 4.x 及其相关依赖，支持自定义样式前缀。

特性

• ✅ 预打包 antd 4.24.14 及其依赖
• ✅ 保持原有目录结构
• ✅ 样式前缀从 ant 替换为 bote
• ✅ 支持按需导入
• ✅ 包含所有样式文件

安装

npm install @gzued/antd-compiled

使用方式

方式一：使用 ConfigProvider（推荐）

import React from 'react';
import { ConfigProvider, Button, Input } from '@gzued/antd-compiled/compiled/antd/es';

function App() {
  return (
    <ConfigProvider prefixCls="bote">
      <div>
        <Button type="primary">按钮</Button>
        <Input placeholder="输入框" />
      </div>
    </ConfigProvider>
  );
}

方式二：使用便捷的 AntdProvider

import React from 'react';
import { AntdProvider, Button, Input } from '@gzued/antd-compiled/compiled';

function App() {
  return (
    <AntdProvider prefixCls="bote">
      <div>
        <Button type="primary">按钮</Button>
        <Input placeholder="输入框" />
      </div>
    </AntdProvider>
  );
}

方式三：直接导入组件

import React from 'react';
import { Button } from '@gzued/antd-compiled/compiled/antd/es/button';
import { ConfigProvider } from '@gzued/antd-compiled/compiled/antd/es/config-provider';

function App() {
  return (
    <ConfigProvider prefixCls="bote">
      <Button type="primary">按钮</Button>
    </ConfigProvider>
  );
}

样式前缀设置

本包已将样式前缀从 ant 替换为 bote，但您仍需要通过 ConfigProvider 的 prefixCls 属性来告诉组件使用哪个前缀：

// ✅ 正确：设置 prefixCls 为 bote
<ConfigProvider prefixCls="bote">
  <Button>按钮</Button>
</ConfigProvider>

// ❌ 错误：不设置 prefixCls，组件会使用默认的 ant 前缀
<Button>按钮</Button>

支持的导入路径

// antd 组件
import { Button } from '@gzued/antd-compiled/compiled/antd/es/button';
import { Input } from '@gzued/antd-compiled/compiled/antd/es/input';
import { ConfigProvider } from '@gzued/antd-compiled/compiled/antd/es/config-provider';

// 图标
import { UserOutlined } from '@gzued/antd-compiled/compiled/@ant-design/icons';

// 工具库
import dayjs from '@gzued/antd-compiled/compiled/dayjs';
import classNames from '@gzued/antd-compiled/compiled/classnames';

样式文件

// 引入样式文件
import '@gzued/antd-compiled/compiled/antd/dist/antd.css';
import '@gzued/antd-compiled/compiled/antd/dist/antd.min.css';
import '@gzued/antd-compiled/compiled/antd/dist/antd.less';

版本信息

import { version } from '@gzued/antd-compiled/compiled';

console.log(version);
// {
//   antd: '4.24.14',
//   '@ant-design/icons': '4.8.0',
//   dayjs: '1.11.10',
//   classnames: '2.3.1',
//   stylePrefix: 'bote',
//   buildTime: '2025-07-18T01:09:55.290Z'
// }

构建

# 构建预打包版本
npm run build

# 测试构建产物
npm run test

注意事项

1. 样式前缀：虽然样式文件中的前缀已替换为 bote，但组件仍需要通过 ConfigProvider 的 prefixCls 属性来设置
2. 按需导入：建议使用按需导入以减少打包体积
3. 样式文件：记得引入相应的样式文件
4. 版本兼容：本包基于 antd 4.24.14，请确保与您的项目兼容