Совместное использование кода между проектом Typescript React и проектом Typescript Express - PullRequest
0 голосов
/ 02 октября 2018

Я пытался найти элегантное решение для обмена кодом между двумя проектами, тесно связанными друг с другом.
У меня есть веб-приложение React, которое просто включает весь клиентский код, и у меня есть Expressприложение, которое обслуживает веб-приложение React, но также действует как API.Поскольку я использую Typescript для обоих проектов, я хочу повторно использовать некоторые типы.Для этого я создал проект shared.

Моя текущая структура папок выглядит следующим образом:

  • web-app
  • shared
  • server

Теперь я хочу связать проекты web-app и server с моим проектом shared, но есть некоторые ограничения:

  1. Эта общая папкане следует загружать на npm.
  2. Я должен иметь возможность все развернуть с помощью Heroku (что исключает npm link, я считаю).
  3. Я бы предпочел не извлекать свой проект React.

Я не уверен, позволяет ли моя текущая структура проектов выполнять нужные мне функции, поэтому не стесняйтесь предлагать и другие структуры папок.

1 Ответ

0 голосов
/ 02 октября 2018

Если вы используете create-react-app для создания веб-приложения, вы можете легко использовать переменную окружения NODE_PATH для абсолютного импорта без создания узловых модулей.

  1. Создание файла .envна корневом уровне (тот же уровень, что и package.json из web-app каталога)
  2. Установите переменную среды, NODE_PATH в shared/ (NODE_PATH=shared/)

Сейчасвместо того, чтобы делать что-то вроде

import { editUser } from ‘../../../shared/actions’;

, вы можете использовать

import { editUser } from ‘shared/actions’;

Исправление ESLint

Установка eslint-plugin-importчтобы избежать появления ошибок при импорте.И обновите ваш .eslintrc файл как

{
    "settings": {
        "import/resolver": {
            "node": {
                "moduleDirectory": ["node_modules", "shared/"]
            }
        }
    }
}

Fixing Flow

Добавьте следующее содержимое в ваш .flowconfig файл

[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=shared
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...