Публикация компонентов

Для начала работы с библиотекой Ant Design в проекте на JavaScript необходимо установить пакет через npm или yarn:

npm install antd
# или
yarn add antd

После установки компоненты подключаются в коде через стандартный синтаксис импорта:

import { Button, Input, Table } from 'antd';
import 'antd/dist/reset.css'; // подключение стилей Ant Design

Использование отдельного импорта компонентов позволяет оптимизировать сборку, так как загружается только необходимый функционал.

Основы публикации компонентов

Публикация компонентов в Ant Design предполагает создание самостоятельных React-компонентов, которые можно использовать в разных проектах. Основные шаги включают:

Создание компонента Компонент создается как функциональный или классовый React-компонент. Например, кнопка с кастомными свойствами:

import React from 'react';
import { Button } from 'antd';

const CustomButton = ({ type, label, onClick }) => {
  return <Button type={type} onCl ick={onClick}>{label}</Button>;
};

export default CustomButton;

Экспорт и структурирование Для удобства дальнейшей публикации компоненты обычно собираются в отдельную директорию components и экспортируются через индексный файл:

// components/index.js
export { default as CustomButton } from './CustomButton';
export { default as CustomInput } from './CustomInput';

Настройка стилей

Ant Design использует систему темизации через Less или CSS-in-JS. Для публикации компонентов важно поддерживать независимость стилей:

Reset стилей: использовать antd/dist/reset.css для совместимости с глобальными стилями.
Кастомизация через тему: изменить переменные Less можно через конфигурацию webpack или craco:

// craco.config.js
module.exports = {
  style: {
    less: {
      modifyVars: { '@primary-color': '#1DA57A' },
      javascriptEnabled: true,
    },
  },
};

Локальные стили: подключать через CSS Modules или styled-components для изоляции внешнего вида.

Создание библиотеки компонентов

Для публикации набор компонентов как отдельной библиотеки нужно:

Структура проекта

my-component-library/
├─ src/
│  ├─ components/
│  │  ├─ CustomButton.js
│  │  └─ CustomInput.js
│  └─ index.js
├─ package.json
├─ README.md

Настройка сборки Используется rollup или webpack для сборки в формат CommonJS и ES Module:

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      exports: 'named',
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
    terser(),
  ],
  external: ['react', 'react-dom', 'antd'],
};

Указание зависимостей В package.json необходимо выделить peerDependencies для React и Ant Design, чтобы библиотека использовала их из проекта, а не включала внутрь:

"peerDependencies": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "antd": "^5.0.0"
}

Документация и тестирование компонентов

Для удобства использования публикуемой библиотеки компонентов необходимо сопровождать каждый компонент документацией:

PropTypes и TypeScript – указывают типы пропсов и повышают предсказуемость поведения.
Storybook – позволяет создавать визуальные примеры компонентов и тестировать их взаимодействие:

// CustomButton.stories.js
import React from 'react';
import { CustomButton } from './CustomButton';

export default {
  title: 'Components/CustomButton',
  component: CustomButton,
};

export const Primary = () => <CustomButton type="primary" label="Нажми меня" />;

Unit-тесты – проверяют работу компонентов через Jest и React Testing Library.

Публикация в npm

После подготовки и сборки проекта библиотеку можно опубликовать в npm:

Авторизация:

npm login

Публикация:

npm publish --access public

После публикации компоненты становятся доступны для установки и использования в других проектах:

npm install my-component-library