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

Question

По сценарию

• Проект 1 должен использовать CustomButton.jsx
• Проект 2 должен использовать CustomButton.jsx

Текущее решение

Скопируйте и вставьте CustomButton.jsx в оба проекта 1 и 2.

Требуемое решение

1. Создайте проект 3, который включает CustomButton.jsx
2. . Храните проект 3 в общей среде (например, в каталоге компании c, например, D://dev/react/my-component-library)
3. . Установите проект 3 через npm для проекта. 1 и 2 и добавьте зависимость к package.json, чтобы сохранить согласованность между git клонами.
4. Импорт CustomButton.jsx с оператором импорта в Проекте 1 & 2: import { CustomButton } from "my-component-library"

Вопросы

1. Какой проект является проектом 3? Это сборка с create-react-app или какой другой инструмент можно использовать?
2. Как я могу создать локальный / приватный npm пакет из проекта 3?
3. Как я могу использовать общий локальная среда для этого частного пакета.
4. Как я могу использовать пакет в Project 1 & 2?

Компоненты довольно просты и не содержат сложной логики c .

РЕДАКТИРОВАТЬ

Это не должно стоить мне ничего (частное npm) или использовать сторонний хостинг, поскольку у меня уже есть частная среда / сервер общего доступа / каталог, и я могу разместить / хранить пакеты там.

Answer 1

1. Project 3 аналогичен любым npm пакетам (например, библиотека пользовательского интерфейса), которые вы устанавливаете, вы можете собирать с create-react-app или нет, если хотите. Просто экспортируйте все, что вы хотите поделиться из этой библиотеки, и импортируйте их из вашего основного проекта, как при использовании любой библиотеки. Вы можете опубликовать sh на npm, например на , или использовать частное репо, например Nexus

2. Для npm Вы можете проверить учебник, который я упомянул выше. Для Nexus, Google, и вы можете придумать что-то вроде this

3 & 4. После публикации пакета вы можете сделать npm install your-package в любом из ваших проект.

Answer 2

У вас есть много вариантов для этого. Вы можете сделать это, создав организацию на npm ( подробности здесь ). Также вы можете использовать биты n штук ( подробности здесь ). Вы даже можете предпочесть что-то более простое, например, рабочие области пряжи ( подробности здесь ).