JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q62373F
  • License MIT

Pre-bundled Ant Design 4.x and related dependencies for @gzued packages

Package Exports

  • @gzued/antd-compiled/compiled/@ant-design/icons
  • @gzued/antd-compiled/compiled/@ant-design/icons/es/index.js
  • @gzued/antd-compiled/compiled/@ant-design/icons/lib/index.js
  • @gzued/antd-compiled/compiled/antd
  • @gzued/antd-compiled/compiled/antd/es/button
  • @gzued/antd-compiled/compiled/antd/es/button/index.js
  • @gzued/antd-compiled/compiled/antd/es/cascader
  • @gzued/antd-compiled/compiled/antd/es/cascader/index.js
  • @gzued/antd-compiled/compiled/antd/es/checkbox
  • @gzued/antd-compiled/compiled/antd/es/checkbox/index.js
  • @gzued/antd-compiled/compiled/antd/es/col
  • @gzued/antd-compiled/compiled/antd/es/col/index.js
  • @gzued/antd-compiled/compiled/antd/es/config-provider
  • @gzued/antd-compiled/compiled/antd/es/config-provider/index.js
  • @gzued/antd-compiled/compiled/antd/es/date-picker
  • @gzued/antd-compiled/compiled/antd/es/date-picker/index.js
  • @gzued/antd-compiled/compiled/antd/es/form
  • @gzued/antd-compiled/compiled/antd/es/form/index.js
  • @gzued/antd-compiled/compiled/antd/es/index.js
  • @gzued/antd-compiled/compiled/antd/es/input
  • @gzued/antd-compiled/compiled/antd/es/input-number
  • @gzued/antd-compiled/compiled/antd/es/input-number/index.js
  • @gzued/antd-compiled/compiled/antd/es/input/index.js
  • @gzued/antd-compiled/compiled/antd/es/mentions
  • @gzued/antd-compiled/compiled/antd/es/mentions/index.js
  • @gzued/antd-compiled/compiled/antd/es/modal
  • @gzued/antd-compiled/compiled/antd/es/modal/index.js
  • @gzued/antd-compiled/compiled/antd/es/pagination
  • @gzued/antd-compiled/compiled/antd/es/pagination/index.js
  • @gzued/antd-compiled/compiled/antd/es/popover
  • @gzued/antd-compiled/compiled/antd/es/popover/index.js
  • @gzued/antd-compiled/compiled/antd/es/radio
  • @gzued/antd-compiled/compiled/antd/es/radio/index.js
  • @gzued/antd-compiled/compiled/antd/es/row
  • @gzued/antd-compiled/compiled/antd/es/row/index.js
  • @gzued/antd-compiled/compiled/antd/es/select
  • @gzued/antd-compiled/compiled/antd/es/select/index.js
  • @gzued/antd-compiled/compiled/antd/es/slider
  • @gzued/antd-compiled/compiled/antd/es/slider/index.js
  • @gzued/antd-compiled/compiled/antd/es/spin
  • @gzued/antd-compiled/compiled/antd/es/spin/index.js
  • @gzued/antd-compiled/compiled/antd/es/switch
  • @gzued/antd-compiled/compiled/antd/es/switch/index.js
  • @gzued/antd-compiled/compiled/antd/es/table
  • @gzued/antd-compiled/compiled/antd/es/table/index.js
  • @gzued/antd-compiled/compiled/antd/es/tabs
  • @gzued/antd-compiled/compiled/antd/es/tabs/index.js
  • @gzued/antd-compiled/compiled/antd/es/time-picker
  • @gzued/antd-compiled/compiled/antd/es/time-picker/index.js
  • @gzued/antd-compiled/compiled/antd/es/tooltip
  • @gzued/antd-compiled/compiled/antd/es/tooltip/index.js
  • @gzued/antd-compiled/compiled/antd/es/tree-select
  • @gzued/antd-compiled/compiled/antd/es/tree-select/index.js
  • @gzued/antd-compiled/compiled/antd/es/upload
  • @gzued/antd-compiled/compiled/antd/es/upload/index.js
  • @gzued/antd-compiled/compiled/antd/lib/index.js
  • @gzued/antd-compiled/compiled/classnames
  • @gzued/antd-compiled/compiled/classnames/index.js
  • @gzued/antd-compiled/compiled/dayjs
  • @gzued/antd-compiled/compiled/dayjs/dayjs.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gzued/antd-compiled) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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,但您仍需要通过 ConfigProviderprefixCls 属性来告诉组件使用哪个前缀:

// ✅ 正确:设置 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,但组件仍需要通过 ConfigProviderprefixCls 属性来设置
  2. 按需导入:建议使用按需导入以减少打包体积
  3. 样式文件:记得引入相应的样式文件
  4. 版本兼容:本包基于 antd 4.24.14,请确保与您的项目兼容