Совместное использование кода между проектом Typescript React и проектом Typescript Express
Я пытался придумать элегантное решение для разделения кода между двумя проектами, которые тесно связаны друг с другом.
У меня есть веб-приложение React, которое просто включает в себя весь клиентский код, и у меня есть приложение Express, которое обслуживает веб-приложение React, но также действует как API. Поскольку я использую Typescript для обоих проектов, я хочу повторно использовать некоторые типы. Для этого я создал проект shared.
Моя текущая структура папок выглядит следующим образом:
- веб-приложение
- общий
- сервер
Теперь я хочу связать проекты web-app и server с моим проектом shared, но есть некоторые ограничения:
- Эту общую папку не следует загружать в npm.
- Я все еще должен иметь возможность развертывать все с помощью Heroku (что, как мне кажется, исключает
npm link). - Я бы предпочел не отказываться от своего проекта React.
Я не уверен, поддерживает ли моя текущая структура проектов нужную мне функциональность, поэтому не стесняйтесь предлагать и другие структуры папок.
Если вы смотрите на это, но используете React-Native, вам также необходимо изменить конфигурацию метро. medium.com/@dushyant_db/…
Ответы 1
Если вы используете create-react-app для создания веб-приложения, вы можете легко использовать переменную среды NODE_PATH для абсолютного импорта без создания узловых модулей.
- Создайте файл
.envна корневом уровне (на том же уровне, что иpackage.jsonкаталогаweb-app) - Задайте для переменной среды
NODE_PATHзначениеshared/(NODE_PATH=shared/)
Теперь вместо того, чтобы делать что-то вроде
import { editUser } from ‘../../../shared/actions’;
вы можете использовать
import { editUser } from ‘shared/actions’;
Исправление ESLint
Установите eslint-plugin-import, чтобы eslint не выдавал ошибки импорта. И обновите файл .eslintrc как
{
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "shared/"]
}
}
}
}
Исправление потока
Добавьте следующий контент в ваш файл .flowconfig
[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=shared
А что с проектом server? tsc также плохо работает с импортом из-за пределов корневой папки.
Да, установка baseUrl плохо работает с tsc. Но мне просто интересно, что если создать символическую ссылку на каталог shared внутри каталога server и использовать ее для импорта модулей, это может сработать.
Я прочитал несколько ответов SO, что использование символической ссылки не будет работать с Heroku.
Вы когда-нибудь догадывались об этом? Я борюсь с этим прямо сейчас.