Блог

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

Поскольку у меня есть несколько клиентов, я хочу создать проект для каждого клиента. Клиентские приложения похожи на основные, за исключением белой метки, и некоторые отдельные компоненты необходимо изменить. Другими словами, я хочу создавать клиентские проекты, используя репозиторий ядра в качестве базы.

Мой подход заключался в использовании подмодуля monorepo или git. Однако во время сборки он постоянно выходил из строя.

Мое текущее дерево каталогов клиентов выглядит так:

 Client ├── config-overrides.js ├── ts-config.js ├── package.json (not extended from the core-project) ├── core-project/ (as a git submodule) │ ├── public/ │ │ ├── index.html │ ├── package.json │ ├── ts-config.js │ ├── src/ │ │ ├── index.tsx │ │ ├── index.css │ │ ├── components/ ├── src/ │ ├── index.css  

Теперь я хочу, чтобы клиентский проект использовал index.tsx и index.html файлы в основном проекте в качестве точки входа для клиентского проекта (задача 1 — устранить could not find a required file ошибку). Однако я хочу использовать файл index.css в папке client/src для переопределения файла, содержащегося в папке client/core-project/src (задача 2 — устранить Can't resolve '@globalCss' ошибку).

Для задачи 1 я попытался использовать customize-cra react-app-rewired для переопределения конфигурации babel без извлечения приложения, созданного create-react-app :

 // config-override.js ... override(  babelInclude([  path.resolve('src'),  fs.realpathSync('monstera/src'),  ]),  

Примечание: корневой пакет.json указывает "baseUrl": "./" , и core-project/package.json имеет "baseUrl": "./src" , который не может быть изменен, потому что я предполагаю, что он не изменится baseUrl в основном проекте.

For task 2, I have tried using paths in the ts-config.json files.

 // client/ts-config.json {  "compilerOptions": {  "baseUrl": "./",  "paths": {  "@globalCss": ["./src/index.css"],  }  ...  } }  

, and

 // client/core-project/ts-config.json {  "compilerOptions": {  "baseUrl": "./src",  "paths": {  "@globalCss": ["./src/index.css"],  }  ...  } }  

Поэтому я хотел бы получить ваши предложения как по задаче 1, так и по задаче 2. Любые рекомендации, кроме customize-cra react-app-rewired , будут высоко оценены. Моя неискушенность в babel обстановке сильно ограничивает меня. Я также пытался использовать основной проект в качестве библиотеки, но сборка не удалась из-за сотен typescript компонентов с типами, которые не были созданы вместе с компонентом.