尝试运行Typescript模拟API服务器时创建响应应用模块加载错误

问题描述

我有一个使用create-react-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)
   

我的main package.json中有几个脚本。一个运行命令“ ts-node mockData / server.ts”将我的打字稿模拟api加载到其自己的端口上。另一个脚本运行正常的react-scripts以在localhost：3000上加载react客户端。我正在使用一个允许并行脚本的库。

在将其添加到现有应用程序之前，我在自己的项目中使用typescript和json-server创建了模拟api，以确保它可以正常工作。但是api的tsconfig中的“模块”键需要为“ Commonjs”才能进行动态导入。我认为，如果模拟api将自己的tsconfig文件设置为Commonjs，它将在create-react-app项目中运行。但是加载api的脚本会导致错误。

当我运行它时，它说“ import xxxx不是模块”（在server.ts中）。 package.json脚本使用我的主项目中的tsconfig设置来加载server.ts文件，并使用“ module：esnext”代替了我的api tsconfig中定义的commonjs。如何告诉它使用其他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-react-app做我想做的事情？我试图对此进行研究，但是找不到任何提及此特定问题的内容。每个json服务器示例都在JS中。但是json-server对于TS有@types，所以我不明白为什么这个问题没有记录。当然其他人也可以将Typescript与Json-server和c-r-a一起使用。

谢谢

解决方法

因此，如果有人有这个问题，答案是在我的用户界面的package.json中有一个脚本，该脚本转到我的模拟api文件夹，并在该文件夹的package.json中运行一个脚本以启动api，然后运行我的创建反应应用程序脚本。所以我将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

很明显，在我的ockApi / package.json中，

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

这很好。