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

Создали новый компонент Astro? Опубликуйте его в npm!

Публикация — отличный способ переиспользовать свои наработки в разных проектах и поделиться ими с сообществом. Компоненты Astro устанавливаются так же, как и любые другие JavaScript-пакеты.

Быстрый старт

Чтобы быстро создать структуру для разработки компонента, используйте готовый шаблон:

npm create astro@latest my-component -- --template component

Создание пакета

Для разработки компонента рекомендуется использовать workspaces (рабочие области). Это позволит разрабатывать пакет параллельно с демонстрационным проектом.

Типичная структура проекта:

• Директорияmy-component-repo/

  • Директорияdemo/ (проект для тестирования и демонстрации)

    • …
  • package.json (корневой манифест)
  • Директорияpackages/

    • Директорияmy-component/ (сам пакет)

      • index.js
      • package.json

package.json пакета

Файл package.json в директории пакета должен содержать метаданные:

{
  "name": "my-astro-component",
  "version": "1.0.0",
  "type": "module",
  "exports": {
    ".": "./index.js",
    "./astro": "./MyComponent.astro"
  },
  "keywords": ["astro-component", "withastro"]
}

Ключевые поля:

• type: "module": Обязательно, чтобы Astro и Node.js понимали ESM-синтаксис.
• exports: Точки входа в пакет.
• keywords: Добавьте astro-component и withastro, чтобы ваш пакет было легче найти в каталогах.

index.js

Основная точка входа, где вы экспортируете свои компоненты:

export { default as MyComponent } from './MyComponent.astro';

Публикация

Когда пакет готов, выполните команду npm publish.

Обратите внимание: пакеты Astro не требуют этапа сборки (build), если они содержат только файлы, нативно поддерживаемые Astro (.astro, .ts, .jsx, .css). Они будут скомпилированы уже в конечном проекте пользователя.

Библиотека интеграций

После публикации ваш пакет автоматически попадет в нашу библиотеку интеграций в течение недели, если в keywords указаны ключевые слова astro-component или astro-integration.