Перейти к содержанию

Компиляция библиотек

Это руководство помогает авторам библиотек понять, как использовать React Compiler, чтобы поставлять пользователям оптимизированный код библиотеки.

Зачем поставлять скомпилированный код?

Как автор библиотеки, вы можете скомпилировать код библиотеки перед публикацией в npm. Это даёт несколько преимуществ:

  • Прирост производительности для всех пользователей - пользователи библиотеки получают оптимизированный код, даже если сами ещё не используют React Compiler
  • Пользователям не нужна конфигурация - оптимизации работают без дополнительной настройки
  • Одинаковое поведение - все пользователи получают одну и ту же оптимизированную версию независимо от их сборки

Настройка компиляции

Добавьте React Compiler в процесс сборки библиотеки:

npm install -D babel-plugin-react-compiler@latest

Настройте инструмент сборки, чтобы он компилировал библиотеку. Например, с Babel:

1
2
3
4
5
6
7
// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-react-compiler',
  ],
  // ... other config
};

Обратная совместимость

Если библиотека поддерживает версии React ниже 19, понадобится дополнительная конфигурация:

1. Установите пакет runtime

Рекомендуем установить react-compiler-runtime как прямую зависимость:

npm install react-compiler-runtime@latest

1
2
3
4
5
6
7
8
{
  "dependencies": {
    "react-compiler-runtime": "^1.0.0"
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}

2. Настройте целевую версию

Задайте минимальную версию React, которую поддерживает библиотека:

1
2
3
{
  target: '17', // Minimum supported React version
}

Стратегия тестирования

Тестируйте библиотеку и с компиляцией, и без неё, чтобы убедиться в совместимости. Запустите существующий набор тестов на скомпилированном коде и отдельно создайте конфигурацию тестов, которая обходит компилятор. Так можно поймать проблемы, которые возникают из-за компиляции, и убедиться, что библиотека корректно работает во всех сценариях.

Устранение неполадок

Библиотека не работает со старыми версиями React

Если скомпилированная библиотека выбрасывает ошибки в React 17 или 18:

  1. Убедитесь, что react-compiler-runtime установлен как зависимость
  2. Проверьте, что конфигурация target совпадает с минимальной поддерживаемой версией React
  3. Убедитесь, что пакет runtime включён в публикуемый бандл

Конфликты компиляции с другими плагинами Babel

Некоторые плагины Babel могут конфликтовать с React Compiler:

  1. Поставьте babel-plugin-react-compiler ближе к началу списка плагинов
  2. Отключите конфликтующие оптимизации в других плагинах
  3. Тщательно проверьте результат сборки

Модуль runtime не найден

Если пользователи видят "Cannot find module 'react-compiler-runtime'":

  1. Убедитесь, что runtime указан в dependencies, а не в devDependencies
  2. Проверьте, что сборщик включает runtime в результат
  3. Убедитесь, что пакет публикуется в npm вместе с библиотекой

Дальнейшие шаги

Источник — https://react.dev/reference/react-compiler/compiling-libraries

Комментарии