{"id":14474,"library":"build-plugin-antd","title":"Ant Design Build Plugin for legacy build-scripts","description":"build-plugin-antd is a legacy plugin designed for older build-scripts based build systems, specifically to integrate Ant Design components. It provides functionalities for customizing Ant Design's Less variables via `modifyVars` and automatically applies `babel-plugin-import` for on-demand loading of Ant Design components, helping to reduce bundle size. The package is currently at version 0.1.4, indicating it is an early release. Its release cadence is effectively stalled, with no recent updates indicated. It appears to be superseded by `@ice/plugin-antd` in the modern Ice.js ecosystem, which is part of the `@ice/app` framework. As such, `build-plugin-antd` is likely abandoned or in a state of indefinite maintenance. Its primary differentiator was simplifying Ant Design integration within the specific `build-scripts` environment it targeted.","status":"abandoned","version":"0.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/alibaba/ice/tree/master/packages/plugin-antd","tags":["javascript"],"install":[{"cmd":"npm install build-plugin-antd","lang":"bash","label":"npm"},{"cmd":"yarn add build-plugin-antd","lang":"bash","label":"yarn"},{"cmd":"pnpm add build-plugin-antd","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This plugin is designed to extend the build-scripts ecosystem.","package":"build-scripts","optional":false},{"reason":"The plugin integrates with Ant Design components for features like on-demand loading and theme customization.","package":"antd","optional":false}],"imports":[{"note":"The plugin is typically consumed as a default export function within build configuration files (e.g., `build.config.js` or `ice.config.ts`).","wrong":"import { antdPlugin } from 'build-plugin-antd';","symbol":"antdPlugin","correct":"import antdPlugin from 'build-plugin-antd';"},{"note":"For legacy Node.js environments or older build configurations that use CommonJS module syntax. This likely imports the plugin function directly.","wrong":"const { antdPlugin } = require('build-plugin-antd');","symbol":"antdPlugin (CommonJS)","correct":"const antdPlugin = require('build-plugin-antd');"},{"note":"If the package ships TypeScript declaration files, this is the correct way to import the plugin's configuration interface for type safety. However, given its low version, types might be external or not comprehensive.","wrong":"import { AntdPluginOptions } from 'build-plugin-antd';","symbol":"AntdPluginOptions (Type)","correct":"import type { AntdPluginOptions } from 'build-plugin-antd';"}],"quickstart":{"code":"import { defineConfig } from '@ice/app'; // Or an equivalent build-scripts defineConfig utility\nimport antdPlugin from 'build-plugin-antd';\n\nexport default defineConfig(() => ({\n  // Other build configurations (e.g., output, assets, publicPath)\n  // ...\n\n  plugins: [\n    // Integrate build-plugin-antd with its configuration options\n    antdPlugin({\n      // Options for babel-plugin-import, applied to Ant Design components\n      libraryDirectory: 'es', // Specifies ES module path for tree-shaking\n      style: true,          // Enables Less-based theme customization for Ant Design\n      // Additional babel-plugin-import options can be added here\n    }),\n  ],\n\n  // Configuration for Less variables to customize Ant Design's theme\n  // This typically integrates with the underlying Less loader setup\n  less: {\n    modifyVars: {\n      '@primary-color': '#007bff', // Example: Change primary color to blue\n      '@link-color': '#007bff',\n      '@border-radius-base': '4px',\n      '@success-color': '#52c41a',\n    },\n    javascriptEnabled: true, // Required for Ant Design's Less theme variables\n  },\n  // ... additional build configurations for Ice.js or build-scripts\n}));","lang":"typescript","description":"This quickstart demonstrates how to configure `build-plugin-antd` within an `Ice.js` (or `build-scripts` compatible) project to enable Ant Design component on-demand loading and theme customization using Less `modifyVars`. It shows how the plugin is added to the `plugins` array and how Less options are applied."},"warnings":[{"fix":"Users are strongly advised to migrate their projects to use `@ice/plugin-antd` for active development, better compatibility, and access to the latest features. Refer to the `@ice/plugin-antd` documentation for setup instructions and migration guides.","message":"The `build-plugin-antd` package (version 0.1.4) is likely abandoned and superseded by `@ice/plugin-antd` in the modern Ice.js ecosystem. It is not actively maintained and may have compatibility issues with newer Node.js versions, build tools, or Ant Design releases.","severity":"breaking","affected_versions":"<=0.1.4"},{"fix":"Verify the compatibility of `babel-plugin-import` with your project's chosen bundler and transpiler. For modern setups, consider alternatives for Ant Design tree-shaking or ensure your build chain includes Babel for this specific plugin.","message":"This plugin relies on `babel-plugin-import` for on-demand loading, which may not be compatible with all modern build tools (e.g., Vite, Rspack) or if your project primarily uses SWC/ESBuild for JavaScript transformations. Integration might require manual adjustments or an alternative approach.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure your project's Less loader configuration is aligned with the plugin's expectations. Explicitly set `javascriptEnabled: true` in your Less loader options and confirm that `modifyVars` are correctly applied by the build system.","message":"The Less `modifyVars` functionality might conflict or require specific configuration depending on how your project handles Less compilation. In particular, ensuring `javascriptEnabled: true` is correctly propagated to the Less loader is crucial for Ant Design themes.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For full compatibility with recent Ant Design versions and optimal performance, migrate to `@ice/plugin-antd`. If staying with `build-plugin-antd` is unavoidable, be prepared to manually configure `babel-plugin-import` and Less variables for newer Ant Design features.","message":"Given its low version number (0.1.4) and lack of recent updates, this plugin may not support the latest features or versions of Ant Design itself, potentially leading to compatibility issues with newer Ant Design components or APIs, or a less optimized build.","severity":"deprecated","affected_versions":"<=0.1.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install build-plugin-antd` or `yarn add build-plugin-antd`. Ensure the plugin name is correctly spelled in your `build.config.js` or `ice.config.ts`.","cause":"The plugin package was not installed or is incorrectly referenced in the build configuration.","error":"Error: Plugin 'build-plugin-antd' not found."},{"fix":"If using ESM, ensure `import antdPlugin from 'build-plugin-antd';` is used. If CommonJS, `const antdPlugin = require('build-plugin-antd');`. Verify the plugin is correctly invoked as a function in the `plugins` array, e.g., `antdPlugin()`.","cause":"The plugin might be imported incorrectly (e.g., a named import for a default export) or the `require` statement returned something other than an executable function.","error":"TypeError: antdPlugin is not a function"},{"fix":"Check your build configuration's Less loader settings. Ensure `javascriptEnabled: true` is set for Less compilation and that `modifyVars` are correctly passed through to the Less processor, either directly or via the plugin's options.","cause":"Less `modifyVars` are not being applied correctly, or `javascriptEnabled` is not set for the Less loader, which Ant Design often requires for theme variables.","error":"Less variable '@primary-color' not found."}],"ecosystem":"npm"}