Недавно я начал использовать bit (ранее BitSrc) для создания повторно используемых компонентов пользовательского интерфейса. У Bit есть хорошая документация о том, как использовать его с реакцией, но не так много, если вы используете create-react-app с typescript и определениями типов. Если вы не знаете, что такое bit, рекомендую прочитать немного об этом здесь.

Погуглить и найти проблемы с bit не так-то просто, так как у него слишком общее имя, поэтому поиск чего-то сложного не всегда дает желаемые результаты.

Я создал свои компоненты с помощью Create react app — CRA и машинописного текста. На сайте bit я нашел документацию по использованию bit с проектом React (без машинописного текста). Моей первой мыслью было, что документация должна работать и для машинописного текста, но это не так.

Итак, давайте перейдем непосредственно к тому, как это сделать.

КРА

Создайте приложение React с машинописным текстом. Учебник можно посмотреть здесь.

Когда у вас есть приложение для реагирования, создайте папку с именем components в разделе src. Эта папка будет содержать все компоненты пользовательского интерфейса.

Первый компонент пользовательского интерфейса

Для удобства чтения лучше создать папку для каждого компонента пользовательского интерфейса. Также, если у вас будут некоторые модули css или какие-то другие подкомпоненты, они могут содержаться в одной папке. Я создам Button с файлом модуля стиля scss. Итак, давайте создадим файлы. Ваша структура папок должна выглядеть так:

Теперь давайте добавим код в оба файла.

Сначала StyledButton.tsx:

А затем StyledButton.module.scss:

Ваш компонент Button готов. Теперь вам нужно установить bit CLI, создать учетную запись Bit и подключиться из CLI. Вы можете следовать инструкциям здесь:



Установка Bit — Bit
Bit Docs · Простой обмен кодом между проектами с вашей командой.docs.bit.dev



После установки bit вам необходимо добавить его в свой проект.

  • Запустите команду bit init в корневой папке вашего проекта.
  • Затем добавьте компилятор реакции, запустив bit import bit.envs/compilers/react -c
  • Пока не запускайте команду add, это объясняется в следующем разделе.
  • Остальные подробности в документации.

Машинопись

Существует разрядный компилятор для реакции с машинописным текстом под названием React-TypeScript, но он устарел и не работает (по состоянию на апрель 2019 г.). Поэтому мы должны сами преобразовать машинописный текст в javascript, как описано в следующих разделах.

Теперь после инициализации вы можете следовать Учебному пособию Bit React, если вы используете React с Javascript. Но что делать с React with Typescript? Если вы хотите преобразовать typescript в javascript и создать файлы type (*.d. ts), вам нужно использовать компилятор машинописного текста (tsc), как показано в следующем разделе.

Компилятор машинописного текста

Чтобы сгенерировать JS и типы из кода TS, вам понадобится компилятор Typescript (tsc), а tsc — файл tsconfig.json. Но в CRA файл tsconfig.json создается для вас CRA во время сборки, и вы не хотите изменять этот сгенерированный файл. Чтобы создать новый файл tsconfig, давайте назовем его lib.tsconfig.json со следующим содержимым:

В lib.tsconfig.json есть несколько важных полей:

  • outDir: выходной каталог для сгенерированных файлов javascript и type.
  • types: какие определения типов включать. Я включил узел из-за синтаксиса «require» в строке 2 файла StyledButton.tsx. Если вы не используете «require», у вас может быть пустой массив: []
  • включать: какие папки включать
  • Детали tsconfig можно прочитать здесь

Теперь добавьте новый скрипт в package.json с именем build-cmps или любым другим именем, которое вы предпочитаете.

Этот скрипт запустит компилятор машинописного текста и сгенерирует файлы по пути, указанному в outDir в файле lib.tsconfig.json выше. Но tsc читает только файлы с расширением *.ts и *.tsx. Файл стиля (.scss) вам нужно скопировать себе.

Установите файлы копирования, чтобы сделать его независимым от платформы: npm install copyfiles --save-dev и измените скрипт build-cmps на

Выполнить: npm run build-cmps Это сгенерирует все файлы JS и Type в выходном каталоге.

Примечание. Если вы сохраните структуру папок outDir такой же, как у вашего app/src, как я сделал, вы можете скопировать все файлы .scss с помощью одна такая команда. В противном случае вам придется копировать каждый файл .scss.

Экспорт в бит

Теперь вы можете добавить компонент в бит, как показано ниже. Это также объясняется в документации, за исключением команды bit add ниже, которая немного отличается:

  • Выполнить bit add lib/src/components/StyledButton/ --id styled-button --main StyledButton.js
  • Указав путь к папке, бит добавляет все файлы в папке в один компонент.
  • id: указывает имя этого компонента, поэтому оно может отличаться от имени компонента React.
  • main: определяет файл точки входа компонента
  • Беги bit tag --all
  • Беги bit export <YourBitAccount>.<BitCollection>
  • Теперь ваш компонент будет доступен в вашей битовой коллекции.

После того, как ваш компонент bit будет экспортирован в вашу коллекцию, вы можете импортировать его в другой проект с помощью npm, yarn или bit:

  • npm: npm i @bit/<useraccount>.<collectionname>.styled-button
  • пряжа: yarn add @bit/<useraccount>.<collectionname>.styled-button
  • бит: bit import <useraccount>.<collectionname>/styled-button

Примечание. Вам не нужно добавлять bit (bit init) в проект, который импортирует компонент Bit, вы можете просто установить его через npm или yarn.