尝试运行 Typescript 模拟 api 服务器时创建 React-App（模块加载错误）

Question

我有一个使用 create-react-app 创建的客户端应用程序，它使用 typescript。我的目录结构是这样的（如有混淆请见谅）：

   -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 有几个脚本。一个运行s 命令 'ts-node mockData/server.ts' 将我的打字稿模拟 api 加载到它自己的端口上。另一个脚本运行是正常的反应脚本，用于在 localhost:3000 上加载反应客户端。我正在使用允许并行脚本的库。

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

当我运行它时，它说“导入 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-server 示例都在 JS 中。但是 json-server 有用于 TS 的 @types，所以我不明白为什么没有记录这个问题。当然其他人使用带有 Json-server 和 c-r-a.

的 Typescript

谢谢

Answer 1

所以如果有人有这个问题，答案是在我的 ui 的 package.json 中有一个脚本，该脚本转到我的模拟 api 文件夹和运行在该文件夹的 package.json 中有一个脚本来启动 api，然后运行我的 create-react-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"
  }

效果很好。

尝试运行 Typescript 模拟 api 服务器时创建 React-App（模块加载错误）

Create-React-App while attempting to run a Typescript mock api server (module loading error)

node.js

typescript

tsconfig

json-server

create-react-app

尝试 运行 Typescript 模拟 api 服务器时创建 React-App（模块加载错误）

Create-React-App while attempting to run a Typescript mock api server (module loading error)

node.js

typescript

tsconfig

json-server

create-react-app

尝试运行 Typescript 模拟 api 服务器时创建 React-App（模块加载错误）