如何在反应应用程序中设置我的 index.tsx 文件的路径？答案

【问题标题】：How do I set path to my index.tsx file in react app?如何在反应应用程序中设置我的 index.tsx 文件的路径？
【发布时间】：2021-02-07 12:32:24
【问题描述】：

我使用npx create-react-app my-app --template typescript 生成了 React 应用程序。我想将所有生成的文件移动到/src/client，并将我在 Express 中制作的后端移动到 /src/server。所以在移动 react 应用程序并运行它后，我得到了这个错误。

Could not find a required file.
  Name: index.js

通过将index.tsx 从/src 移动到/src 来实现。所以现在的问题是如何在应用配置中更改我的目标文件？

这是我的 package.json

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.1",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

还有我的 ts 配置

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

我已经搜索了 stackoverflow，但没有一个答案对我有用。如果有人可以提供帮助，我将不胜感激！感谢您的建议。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

在你里面加这行package.json:

  "main": "src/index.tsx",

这告诉它寻找扩展名为.tsx 的index 而不是.js。

【讨论】：

添加后我仍然收到关于丢失文件的相同错误
您提到有两个单独的文件夹用于客户端和服务器。相对于 package.json 的位置，“src/index.tsx”是入口文件的正确路径吗？我对您的结构感到困惑（前端和后端是否有两个单独的 package.json 文件？），但也许应该是 "main": "src/client/index.tsx"
package.json 在根目录下。 index.tsc 的路径是 /src/client/index.tsc，但由于某种原因它也不起作用
在同一个目录下创建服务器和客户端项目还有其他好的做法吗？
Here's a good answer 关于这一点。他们似乎知道他们在说什么（肯定比我知道的要多），他们建议您将它们构建为具有单独 package.json 文件的两个单独的应用程序。