Как структурировать приложение React ES6 для содействия повторному использованию общего кода

#reactjs #directory-structure

#reactjs #структура каталогов

Вопрос:

У нас есть приложение react es6, которое переносится с помощью babel. Он имеет следующую файловую структуру:

- Root
- common
- common-component
- common-component.spec.js
- project1
- .babelrc
- .jest.json
- package.json
- node_modules
- src
- component
- component.js
- component.spec.js
- project2
- .babelrc
- ...

Я хочу создать, протестировать и запустить project1. Эта сборка должна включать исходный код и тесты как из common, так и из project1 и игнорировать содержимое project2.

В настоящее время я вижу, как babel поднимается по дереву каталогов в поисках .babelrc и node_modules и т. Д. При запуске в контексте project1 это, очевидно, не находит их, и возникает ошибка переноса.

Есть ли способ включить файлы из common при выпуске теста запуска npm из каталога project1?

Или, альтернативно, следует ли считать common, project1 и project2 независимыми проектами со своими собственными package.json, .babelrc, node_modules и т. Д. Если это так, как я смогу запускать тесты из common при создании project1 или project2?

Я чувствую, что мне не хватает чего-то очевидного с точки зрения повторного использования кода в нескольких проектах.

Заранее спасибо.

Ответ №1:

На случай, если кто-нибудь еще столкнется с этим.

Мы нашли 2 решения для достижения описанного сценария.

  1. Используйте подмодули git для включения общего репозитория кода в качестве вложенной папки project1 и / или project2.

  2. Создайте пакет npm для общего кода и перенесите его в project1 и / или project2.

Мы решили пойти с вариантом 2 и запустить отдельный проект через наш конвейер сборки, который тестировал общие компоненты изолированно от любых проектов.