Совместное использование кода с использованием общего модуля Sdk в приложении для создания приложения приложения Reactjs

Я хочу начать новое приложение, которое будет иметь как сетевые, так и реактивные интерфейсы.

Я решил перенести весь код -non enviroment dependent- в третий пакет -aka sdk-, чтобы я мог делиться между реакцией и реакцией native.

Итак, мой проект теперь имеет 4 модуля

  1. Веб - создано с cra
  2. Sdk - в основном редукция + редукция сага + реактивные контейнеры + Hoc
  3. Мобильный -react родной

  4. Сервер - nodejs express api.

    • Все веб-сайты, мобильные устройства и сервер будут зависеть от модуля Sdk.
    • Модуль sdk будет зависеть от серверного модуля -mainly от непонятных mocks и интерфейсов данных.

Существует ли стандартный способ достижения такой структуры?

Скорее всего, я бы с удовольствием

  • используйте рабочие области пряжи, чтобы поднять все узловые модули в одну папку, чтобы избежать переустановки пакетов в каждом проекте
  • я буду работать во всех 4 проектах одновременно, поэтому мне нужно hotreload, чтобы быть в курсе этого.

** вызовы, стоящие перед **

  1. Cra doesnot transpile code вне src-папки, поэтому, хотя веб-проект обновляет qhen, я вношу изменения в sdk. Он не может понять код es6.
  2. Jest также не понимает es6 от node_modules

Как я могу избежать восстановления шага во время одновременной работы как на sdk, так и на веб-модулях?

Ответы

Ответ 1

Рабочее пространство пряжи звучит как хороший подход к структуре проекта, о которой вы думаете.

У вас может быть каталог packages который вы можете добавить свои проекты:

/packages
  - web
  - sdk
  - native

Теперь вы можете использовать babel для просмотра изменений кода для каждого вашего пакета, используя babel -w и рабочее пространство пряжи, позаботится о их объединении.

Если наблюдатели babel работают, любые изменения, которые вы делаете в sdk, будут отражаться как на web и на native пакетах. Вы также можете объединить все их вместе, используя что-то вроде одновременного запуска наблюдателей с помощью одной команды.

Я являюсь соавтором библиотеки с открытым исходным кодом, где мы следуем аналогичной структуре, которую вы можете проверить здесь. Разница в этом проекте заключается в том, что наша логика redux находится в отдельном репо.

Для того, чтобы шутя на работу, вы можете добавить test окр в ваш .babelrc файл, который transpiles модулей. Таким образом, вы можете добавить две разные среды, такие как test который преобразуется в модули commonjs и среду es которая хранит модули ES, чтобы ваши пользователи могли использовать дрожание деревьев. Пример конфигурации

Надеюсь, это даст вам хорошую отправную точку :)

Ответ 2

Вы можете попробовать структуру проекта следующим образом:

| package.json
|- node_modules
|- Web
 | package.json
|- SDK
 | package.json
|- Mobile
 | package.json
|- Server
 | package.json

Затем вы можете установить все в корневую папку и установить переменную env NODE_PATH:

export NODE_PATH='yourdir'/node_modules