Frontend Academy · Урок

Версионирование и публикация в npm

«Версионирование и публикация в npm» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем публиковать в npm

Если вашу дизайн-систему используют несколько приложений, публикуйте её как пакет. Потребители устанавливают его с помощью npm/yarn/pnpm, фиксируют версии и обновляют пакет по собственному графику.

Семантическое версионирование (SemVer)

Версии следуют формату MAJOR.MINOR.PATCH. MAJOR: несовместимые изменения. MINOR: новые возможности, совместимые с предыдущими версиями. PATCH: только исправления ошибок.

Когда повышать версию

Переименовали свойство? MAJOR. Добавили новое необязательное свойство? MINOR. Исправили ошибку в CSS? PATCH. Версии до 1.0 (0.x.y) могут содержать несовместимые изменения в MINOR — но не злоупотребляйте этим.

package.json — манифест

Настройте внешний вид своего пакета в npm.

{
  "name": "@yourorg/design-system",
  "version": "1.4.2",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
    "./theme": "./dist/theme.js"
  },
  "files": ["dist", "README.md"],
  "peerDependencies": { "react": "^18.0.0" }
}

Результат сборки

Поставляйте CommonJS, ESM и объявления типов. Такие инструменты, как tsup или vite build --lib, делают это автоматически.

// tsup.config.ts
export default {
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  clean: true,
  external: ['react', 'react-dom']
};

// package.json: "build": "tsup"

peerDependencies

Указывайте React/Vue и другие библиотеки в peerDependencies, чтобы потребители использовали собственную версию. Если указать их как обычные зависимости, они будут включены в сборку дважды — это приведёт к нарушению работы хуков и контекста.

Готовность к удалению неиспользуемого кода

Используйте экспорты ESM и избегайте побочных эффектов, чтобы сборщики могли удалять неиспользуемые компоненты. Укажите в package.json: "sideEffects": false (или перечислите отдельные файлы, например CSS).

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

Войдите один раз, затем опубликуйте пакет.

npm login

# Bump version + publish:
npm version patch   # 1.4.2 -> 1.4.3
npm publish

# Or scoped public package:
npm publish --access public

Автоматизация выпусков с помощью Changesets

Changesets — современный набор инструментов для публикации монорепозиториев и библиотек. В запросы на слияние добавляется файл «changeset» с описанием изменения; CI выпуска автоматически повышает версии и публикует пакеты.

npm install -D @changesets/cli
npx changeset init

# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md

# CI on main:
npx changeset version  # bumps versions in package.json + generates changelog
npx changeset publish  # publishes to npm

Автоматический журнал изменений

Changesets автоматически создаёт CHANGELOG.md для каждого пакета на основе описаний в файлах изменений — потребители могут узнать, что изменилось в каждой версии.

Теги дистрибуции npm

Используйте dist-tags для предварительных выпусков: npm publish --tag beta публикует пакет, не заменяя версию latest. Потребители подключают такую версию с помощью npm install @yourorg/design-system@beta.

Частные реестры

Для внутренних пакетов можно использовать GitHub Packages, GitLab Package Registry или самостоятельно размещённый Verdaccio. Настройте их с помощью .npmrc: @yourorg:registry=https://npm.pkg.github.com.

Устаревшие версии

Пометьте версию как устаревшую, чтобы предупредить тех, кто её устанавливает.

npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'

Быстрая проверка

Если вы переименовали свойство экспортируемого компонента, какое повышение версии SemVer требуется?

Итоги: версионирование и публикация

SemVer: MAJOR.MINOR.PATCH — несовместимые изменения, новые возможности и исправления. Собирайте CJS + ESM + типы (tsup, vite --lib). Указывайте React/Vue в peerDependencies. sideEffects:false обеспечивает удаление неиспользуемого кода. Публикуйте через npm или автоматизируйте публикацию с помощью Changesets. CHANGELOG создаётся автоматически. Для бета-версий используйте dist-tags. Для внутренних пакетов — частные реестры.

Часто задаваемые вопросы

Урок «Версионирование и публикация в npm» бесплатный?

Да — полный текст урока «Версионирование и публикация в npm» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Версионирование и публикация в npm»?

Используйте семантическое версионирование, автоматизируйте создание журнала изменений с помощью Changesets или standard-version и публикуйте библиотеку в npm или частный реестр Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Версионирование и публикация в npm»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Storybook: истории, элементы управления и документация
Токены дизайна со Style Dictionary
Версионирование и публикация в npm
Использование дизайн-системы

← Назад к Frontend Academy