У меня есть два разных веб-приложения, разработанных с помощью React. Эти два приложения должны совместно использовать некоторые компоненты React. Я хотел бы иметь общую структуру проекта следующим образом:
.
├── cms-client
├── my-app
└── shared
, где:
cms-client и my-app - это два стандартных приложения React; shared - это папка, содержащая общие компоненты, которая должна использоваться двумя другими приложениями.
Я попытался добавить символическую ссылку в две папки src приложений, например::
ln -s ../../shared/ .
выполняется внутри папки src каждого приложения. В этом случае, когда я пытаюсь использовать общий компонент, компиляция не удалась:
../shared/Example.js
SyntaxError: /my-long-project-path/React/shared/Example.js: Unexpected token (6:12)
4 | render() {
5 | return (
> 6 | <div>
| ^
7 | <p>I am an Example of Shared Component</p>
8 | </div>
9 | )
, как будто она скомпилирована как стандартный файл js, а не как файл React jsx.
Итак, Я пытаюсь другой подход, используя пользовательскую конфигурацию файла jsconfig.json. Теперь моя идея состоит в том, чтобы как-то внедрить папку shared, но это кажется невозможным.
Я мог бы написать скрипт Gulp, который следит за папкой shared, а затем скопировать содержимое в папку sharedиз двух проектов, но это не оптимальное решение и очень подвержено ошибкам (из моей IDE мне нужно обратить внимание на то, какую из трех папок shared я редактирую). Более того, стандарт react-scripts уже наблюдает за папкой src на наличие изменений. Так что, если у кого-то есть лучшее решение, это будет здорово !!!