用于服务器端渲染的 create-react-app 打字稿

Posted 2023-02-22

【中文标题】用于服务器端渲染的 create-react-app 打字稿

【英文标题】：create-react-app typescript for server-side-rending

【发布时间】：2020-03-21 17:54:33

【问题描述】：

我有一个由 create-react-app typescript（tsx 文件）构建的项目。

我现在想制作项目 s-s-r，但不知道如何开始。

在使用 this article 之后的 typescript 之前，我能够进行 s-s-r

如果您能给我指导，不胜感激

【参考方案1】：

我在挣扎了 8 个小时后解决了这个问题。

您不能将 react 的 tsconfig 文件用于服务器。

我必须制作一个新的配置文件。 (server.tsconfig.json)

  "compilerOptions": 
    "baseUrl": "./src",
    "paths": 
      "*": ["*", "./src/@types/*"]
    ,
    "outDir": "./dist",
    "target": "es5",
    "typeRoots": ["./src/@types", "./node_modules/@types"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "strictNullChecks": false,
    "jsx": "react",
    "noEmit": true
  ,
  "exclude": ["node_modules"]

并在运行 ts-node 时指明此配置

ts-node --project server.tsconfig.json --require tsconfig-paths/register server/index.js

如果您使用自定义类型，则必须在服务器文件中添加类型的引用

/// <reference path="../src/@types/global.d.ts" />

我希望这会节省您的时间

【讨论】：

你在导入'ignore-styles'模块吗？你是如何应用 css 或 sass 的？

@adadortiz 能否提供客户端 react 应用和服务器的完整代码？

@ahadortiz 能否提供此类应用程序的示例代码

【参考方案2】：

几个月前我发现自己穿着这双鞋。我在配置客户端和服务器代码以使用打字稿方面遇到了很多困难。

做对了之后，我创建了一个包含模板和其他开发配置的存储库。

看看server-side rendered react with typescript

使用此模板启动新项目非常容易。