create-react-app 支持项目引用

mhd8tkvw  于 8个月前  发布在  React
关注(0)|答案(6)|浏览(131)

你的提案是否与问题相关?
我正在使用 create-react-app 进行 my React workshops 。每个项目都有一个练习文件(未完成的代码)和一个最终文件(已完成的代码)。我正在将它们全部重写为 TypeScript。我不想为练习文件启用严格模式,因为这对于刚接触 TypeScript 的人来说可能会很困难。然而,我确实希望练习版本的最终文件能够使用严格模式进行类型检查(出于我自己的考虑)。
在一个项目中为不同文件设置不同的配置可以使用 project references 配置来实现。以下是我所做的“工作”:kentcdodds/react-fundamentals@84eb9ed

tsconfig.json

  1. {
  2. "files": [],
  3. "references": [
  4. {"path": "config/tsconfig.exercise.json"},
  5. {"path": "config/tsconfig.final.json"}
  6. ]
  7. }

config/tsconfig.exercise.json

  1. {
  2. "extends": "./tsconfig.shared.json",
  3. "include": ["../src/exercise/"],
  4. "compilerOptions": {
  5. "strict": false
  6. }
  7. }

config/tsconfig.final.json

  1. {
  2. "extends": "./tsconfig.shared.json",
  3. "exclude": ["../src/exercise/"],
  4. "include": ["../src"],
  5. "compilerOptions": {
  6. "strict": true,
  7. "noUncheckedIndexedAccess": true
  8. }
  9. }

config/tsconfig.shared.json

  1. {
  2. "compilerOptions": {
  3. "target": "es5",
  4. "lib": ["dom", "dom.iterable", "esnext"],
  5. "allowJs": true,
  6. "skipLibCheck": true,
  7. "esModuleInterop": true,
  8. "allowSyntheticDefaultImports": true,
  9. "strict": false,
  10. "forceConsistentCasingInFileNames": true,
  11. "module": "esnext",
  12. "moduleResolution": "node",
  13. "resolveJsonModule": true,
  14. "isolatedModules": true,
  15. "noEmit": true,
  16. "jsx": "react-jsx",
  17. "noFallthroughCasesInSwitch": true
  18. }
  19. }

运行 tsc -b 将使用预期的配置对所有文件进行类型检查。
然而,一旦我运行 react-scripts start ,我的 tsconfig.json 就会出现 changed :

  1. {
  2. "files": [],
  3. "references": [
  4. {
  5. "path": "config/tsconfig.exercise.json"
  6. },
  7. {
  8. "path": "config/tsconfig.final.json"
  9. }
  10. ],
  11. "compilerOptions": {
  12. "target": "es5",
  13. "lib": [
  14. "dom",
  15. "dom.iterable",
  16. "esnext"
  17. ],
  18. "allowJs": true,
  19. "skipLibCheck": true,
  20. "esModuleInterop": true,
  21. "allowSyntheticDefaultImports": true,
  22. "strict": true,
  23. "forceConsistentCasingInFileNames": true,
  24. "noFallthroughCasesInSwitch": true,
  25. "module": "esnext",
  26. "moduleResolution": "node",
  27. "resolveJsonModule": true,
  28. "isolatedModules": true,
  29. "noEmit": true,
  30. "jsx": "react-jsx"
  31. },
  32. "include": [
  33. "src"
  34. ]
  35. }

随着这些更改,当我尝试运行 tsc (或 tsc -b )时,会出现几个错误,例如:

  1. tsconfig.json:4:5 - error TS6306: Referenced project '/Users/kentcdodds/code/epic-react/react-fundamentals/config/tsconfig.exercise.json' must have setting "composite": true.
  2. 4 {
  3. ~
  4. 5 "path": "config/tsconfig.exercise.json"
  5. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  6. 6 },
  7. ~~~~~
  8. tsconfig.json:7:5 - error TS6310: Referenced project '/Users/kentcdodds/code/epic-react/react-fundamentals/config/tsconfig.final.json' may not disable emit.

通过将 "noEmit": false"composite": true 设置为 config/tsconfig.shared.json ,我可以进一步前进,但无法摆脱这个错误:

  1. error TS6305: Output file '/Users/kentcdodds/code/epic-react/react-fundamentals/src/final/07.extra-3.d.ts' has not been built from source file '/Users/kentcdodds/code/epic-react/react-fundamentals/src/final/07.extra-3.tsx'.
  2. The file is in the program because:
  3. Matched by include pattern 'src' in '/Users/kentcdodds/code/epic-react/react-fundamentals/tsconfig.json'
  4. tsconfig.json:33:5
  5. 33 "src"
  6. ~~~~~
  7. File is matched by include pattern specified here.

我尝试了我能想到的所有组合选项,但没有什么能让我让 TypeScript 满意+实现我在 create-react-app 项目中为不同文件设置不同配置的目标。

描述你希望得到的支持

我希望直接支持 references 。我注意到了 ts-loader's page on references
除了这个之外,我对环境变量(类似于 SKIP_PREFLIGHT_CHECK )也很满意,它可以跳过更新 tsconfig.json 并只是相信配置是有效的。

描述你考虑过的替代方案

我考虑过关闭 create-react-app 或者使用其中一个灵活的项目,但我真的不希望这样做。

其他上下文

我认为我已经说了所有需要说的话 😅

kzmpq1sx

kzmpq1sx1#

进行了一些调查,注意到 create-react-app 实际上使用 https://github.com/TypeStrong/fork-ts-checker-webpack-plugin 进行 TypeScript 检查。实际上确实支持 references ,但 CRA 有较旧的版本,我不认为它支持引用。
不幸的是,当我尝试升级到最新版本时,我遇到了一个错误(没有任何堆栈跟踪):Cannot read property 'tap' of undefined 。我猜这是因为 fork-ts-checker-webpack-plugin 使用了webpack v5中的API,而CRA使用的是webpack v4。
升级到v5可能会相当复杂,所以我停止了在那里的调查。
暂时,我决定使用 patch-package 。我的补丁只是在 verifyTypeScriptSetup 中提前退出:

  1. diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
  2. index 949f34a..0b3b54e 100644
  3. --- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
  4. +++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
  5. @@ -58,6 +58,7 @@ function verifyNoTypeScript() {
  6. }
  7. function verifyTypeScriptSetup() {
  8. + return
  9. let firstTimeSetup = false;
  10. if (!fs.existsSync(paths.appTsConfig)) {

它“起作用”了,因为 CRA 不再更新我的tsconfig文件,但是当有TS错误时,我在终端或错误覆盖层中没有得到任何输出。这实际上更适合我的用例,所以这个解决方法对我有效。

展开查看全部
xkftehaa

xkftehaa2#

我也对此感兴趣.我们有一个大型项目,我想在其中 "插入" 一个React Native应用,并利用我们已经拥有的所有代码.这个问题引用了另一个问题,以及其他调查$x_{1e0f1}x$.

2w3kk1z5

2w3kk1z53#

是的,看起来CRA在这个时候还没有解决这个问题,这确实很尴尬。

在CRA项目中,编辑器(VS Code)中一切都运行良好,但项目无法启动。

sauutmhj

sauutmhj4#

+1 使用Typescript的单仓库在这里确实会受益。

2ic8powd

2ic8powd5#

$1$, $been$ hoping for that feature for years now 🙏

ar7v8xwq

ar7v8xwq6#

+1 难以置信这个问题已经存在了 +3 年

相关问题