create-react-app 支持项目引用

mhd8tkvw  于 22天前  发布在  React
关注(0)|答案(6)|浏览(18)

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

tsconfig.json

{
  "files": [],
  "references": [
    {"path": "config/tsconfig.exercise.json"},
    {"path": "config/tsconfig.final.json"}
  ]
}

config/tsconfig.exercise.json

{
  "extends": "./tsconfig.shared.json",
  "include": ["../src/exercise/"],
  "compilerOptions": {
    "strict": false
  }
}

config/tsconfig.final.json

{
  "extends": "./tsconfig.shared.json",
  "exclude": ["../src/exercise/"],
  "include": ["../src"],
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true
  }
}

config/tsconfig.shared.json

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

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

{
  "files": [],
  "references": [
    {
      "path": "config/tsconfig.exercise.json"
    },
    {
      "path": "config/tsconfig.final.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-jsx"
  },
  "include": [
    "src"
  ]
}

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

tsconfig.json:4:5 - error TS6306: Referenced project '/Users/kentcdodds/code/epic-react/react-fundamentals/config/tsconfig.exercise.json' must have setting "composite": true.

4     {
      ~
5       "path": "config/tsconfig.exercise.json"
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6     },
  ~~~~~

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 ,我可以进一步前进,但无法摆脱这个错误:

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'.
  The file is in the program because:
    Matched by include pattern 'src' in '/Users/kentcdodds/code/epic-react/react-fundamentals/tsconfig.json'

  tsconfig.json:33:5
    33     "src"
           ~~~~~
    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 中提前退出:

diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 949f34a..0b3b54e 100644
--- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -58,6 +58,7 @@ function verifyNoTypeScript() {
 }
 
 function verifyTypeScriptSetup() {
+  return
   let firstTimeSetup = false;
 
   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 年

相关问题