У меня есть клиентское приложение, созданное с помощью приложения create-response-app, и оно использует машинописный текст. Моя структура каталогов такая (извиняюсь, если это сбивает с толку):
-MyApp (folder)
-node_modules (folder)
-package.json (has a script that runs the react client app and the mockApi using, 'ts-node mockApi/server.ts')
-tsconfig.json (this uses module:esnext because apparently CRA requires it?)
-src (folder)
-components
etc.
-MockApi (folder level with MyApp)
-tsconfig.json (uses module:commonJS for server.ts)
-server.ts (creates a json-server in express/node using import syntax)
-mockData (folder)
-index.ts (gathers domain types into single objects)
-someEntity.ts (domain type)
В моем основном package.json есть пара скриптов. Один запускает команду ts-node mockData / server.ts, чтобы загрузить мой макет api машинописного текста на его собственный порт. Другой сценарий запускает обычные сценарии реакции для загрузки клиента реакции на localhost: 3000. Я использую библиотеку, которая позволяет запускать сценарии параллельно.
Прежде чем добавить это в свое существующее приложение, я создал макет api в собственном проекте с помощью машинописного текста и json-сервера, чтобы убедиться, что он будет работать, и это действительно так. Но ключ модуля в tsconfig api должен быть CommonJS для динамического импорта. Я полагал, что это сработает в проекте create-react-app, если у mock api будет собственный файл tsconfig, установленный на CommonJS. Но скрипт для загрузки api вызывает ошибку.
Когда я запускаю его, он говорит, что import xxxx не является модулем (в server.ts). Сценарий package.json использует настройки tsconfig в моем основном проекте для загрузки файла server.ts, используя module: esnext вместо commonJS, как определено в моем api tsconfig. Как мне сказать ему использовать настройки в другом tsconfig?
Вот мой раздел скриптов в моем CRA package.json:
"scripts": {
"start": "run-p start:dev start:api",
"start:dev": "cross-env REACT_APP_API_URL=http://localhost:3000 react-scripts start",
"start:api": "ts-node ./mockApi/server.ts",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
И сценарий start: api - это то место, где он взорвался на моем server.ts (первый импорт):
import jsonServer from "json-server";
import mockData from "./mockData/index";
Неужели просто невозможно сделать то, что я пытаюсь сделать, с помощью приложения create-response-app? Я пытался исследовать это, но не могу найти ничего, что упоминало бы об этой конкретной проблеме. Каждый пример json-сервера находится на JS. Но на json-сервере есть @types для TS, поэтому я не понимаю, почему эта проблема не задокументирована. Наверняка другие используют Typescript с Json-сервером и c-r-a.
Спасибо