Create-React-App при попытке запустить макет api-сервера Typescript (ошибка загрузки модуля)

У меня есть клиентское приложение, созданное с помощью приложения 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.

Спасибо


node.js typescript create-react-app tsconfig json-server
person MattoMK    schedule 26.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, если у кого-то есть этот вопрос, ответ заключался в том, чтобы иметь скрипт в моем ui package.json, который переходит в мою папку mock api и запускает скрипт в пакете package.json этой папки для запуска api, а затем запускает мой create-response -app скрипт. Поэтому я изменил свой root / package.json на:

"scripts": {
    "start:api": "cd mockApi && npm run start",
    "start": "run-p start:api start:dev",
    "start:dev": "cross-env REACT_APP_API_URL=http://localhost:3000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

затем в моей корневой папке просто запустите это, чтобы запустить его:

npm run start

И, очевидно, в моем mockApi / package.json у меня есть

"scripts": {
    "start": "ts-node server.ts"
  }

Это прекрасно работает.

person MattoMK    schedule 31.10.2020