Skip to content

Latest commit

 

History

History
62 lines (43 loc) · 5.26 KB

MONOREPO.md

File metadata and controls

62 lines (43 loc) · 5.26 KB

Содержимое репозитория

Это монорепозиторий, в котором включены yarn workspaces, поэтому каждая директория в ./packages/* представляет из себя отдельный пакет.

Все зависимости устанавливаются в общую папку node_modules (в корневой директории), а внутренние пакеты линкуются между собой.

Сейчас репозиторий содержит 2 пакета:

  • @csssr/core-design — основной пакет, библиотека с переиспользуемыми React-компонентами;
  • @csssr/core-scripts — cli-утилита для развертывания голого проекта from scratch из файлов-шаблонов и других полезных комманд, которые могут пригодиться пользователю библиотеки;

Пакеты публикуются в npm.

Как разрабатывать

Запустить npm-cкрипт $ yarn start:storybook в директирии ./packages/core-design;

Пакет @csssr/core-design

Эту библиотеку подключают в проект (с React-ом), и импортируют из неё компоненты.

Важные поля в package.json

Стоит обратить внимание, что в поле main указан файл lib/index.js. Следовательно, при импорте библиотеки этот файл считается входной точкой.

В package.json также можно увидеть все необходимые для сборки npm-скрипты.

Зависимости

Ожидается, что у проекта, где будет использоваться библиотека, уже установлены следующие зависимости:

Эти зависимости прописаны в peerDependencies в package.json файле пакета @csssr/core-design. Использование библиотеки @csssr/core-design без этих пакетов невозможно.

Также стоит отметить, что эти зависимости есть в devDependencies — сейчас это нужно для корректной работы системы типов, в будущем это будет нужно для unit-тестов.

Сборка для продакшн

При вызове npm-скрипта build сначала производится очистка директории packages/core-design/lib, куда в дальнейшем попадут артифакты сборки.

Далее запускается 3 параллельных процесса:

  1. Производится транспиляция babel-ем, который, используя конфигурацию из файла packages/core-design/babel.config.js, транспилирует .tsx и .ts файлы и складывает результат в директорию packages/core-design/lib;
  2. Утилита tsc (транспайлер TypeScript-a) складывает в ту же директорию файлы-декларации типов;
  3. Утилита cpx копирует в ту же конечную директорию файлы картинок и шрифтов (работает по glob-паттерну);

Сборка для локальной разработки

Производится аналогично сборке для продакшн, только все параллельные процессы запускаются в watch режиме.

Пакет @csssr/core-scripts

Представляет из себя простую cli-утилиту, написанную с использованием yargs.

При установке глобально (npm install -g @csssr/core-scripts) пользователю устанавливается cli-утилита, которую можно вызвать так:

$ core-design --help

Сборка для продашкн

Нет как таковой, т.к. утилита пишется на JS-е, без использования особого (современного) синтаксиса, нет транспиляции кода.

Сборка для локальной разработки

Для локальной разработки требуется иметь возможность часто запускать cli-утилиту после внесения правок в код. Для этого удобно сделать так:

  1. Перейти в директорию пакета $ cd ./packages/core-scripts;
  2. Выполнить команду $ npm link;

Теперь можно локально запускать команду $ core-design ....