Question

我目前正在使用create-react-app引导我的一个项目。基本上，我试图通过将它们添加到由create-react-app生成的默认tsconfig.json中来在tsconfig.json中设置路径：

"baseUrl": "./src",
"paths": {
  "interfaces/*": [
    "common/interfaces/*",
  ],
  "components/*": [
    "common/components/*",
  ],
},

但是，每次我运行基本运行yarn start的{{1}}时，它都会删除我的更改并再次生成默认配置。

如何告诉create-react-app使用我的自定义配置？

Answer 1

我能够通过使用this issue的建议来做到这一点。

将配置选项放入脚本，以便将脚本喜欢的脚本删除到一个单独的文件（例如，paths.json）中，并通过extends指令从tsconfig.json中引用它。

paths.json：

{
  "compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "interfaces/*": [ "common/interfaces/*"],
    "components/*": [ "common/components/*"],
    }
  }
}

tsconfig.json

{
  "extends": "./paths.json"
   ...rest of tsconfig.json
}

Answer 2

创建React App当前不支持baseUrl。但是，有一种解决方法...要为Webpack和IDE设置baseUrl，您必须执行以下操作：

使用以下代码创建.env文件：

NODE_PATH=./

使用以下代码创建一个tsconfig.paths.json文件：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "src/*": ["*"]
    }
  }
}

将以下行添加到tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  ...
}

Answer 3

您不能，我不确定何时可以。我一直在尝试使用baseUrl和路径，以便避免相对导入，但是如您所见，它们有意删除某些值。 “（还）”令人鼓舞，但（叹气）谁知道他们何时会正式支持它。我建议{/ 3}}问题在发生更改时予以提醒。

The following changes are being made to your tsconfig.json file:
      - compilerOptions.baseUrl must not be set (absolute imports are not supported (yet))
      - compilerOptions.paths must not be set (aliased imports are not supported)

Answer 4

我有一个与此普遍问题类似的问题（CRA覆盖了我正在使用的React库的"noEmit": false中的tsconfig.json，我正在研究其中有两个单独的构建，一个用于本地开发，另一个用于以使用类型构建生产库）。简单的解决方案：在sed的{{1}}脚本中使用postbuild。例如：In-place edits with sed on OS X。

package.json

但是，这种方法不是跨平台的（不同于{ ... "scripts": { ... "postbuild": "sed -i '' 's/{THING CRA IS REPLACING}/{WHAT YOU ACTUALLY WANT}/g' tsconfig.json # CRA is too opinionated on this one.", ... } ... }是rimraf的跨平台替代方案）。

Answer 5

对我来说，问题在于 VSCode 使用旧版本的 typescript (4.0.3)，而项目附带的 typescript 版本是 (4.1.2)。

以下对我有用：

转到命令面板 CTRL+Shift+P。
选择“TypeScript：选择 TypeScript 版本...”。
选择“使用工作区版本”。

Answer 6

如果您像我一样使用4.0.0的react-scripts，那么您所要做的就是删除该行（在我的第160行附近）：

paths: { value: undefined, reason: 'aliased imports are not supported' }

来自文件node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

我能够像这样直接将baseUrl和path配置添加到我的tsconfig.json文件中：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@domain/*": ["../src/domain/*"],
    },
  }
}

最后编译并继续我的生活。

通常，YMMV。请测试您的东西。显然这是一个hack，但是对我有用，所以我在这里发帖，以防它对某人有所帮助。

如果您想与团队共享，请使用以下修补程序：

diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 00139ee..5ccf099 100644
--- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -156,7 +156,8 @@ function verifyTypeScriptSetup() {
           : 'react',
       reason: 'to support the new JSX transform in React 17',
     },
-    paths: { value: undefined, reason: 'aliased imports are not supported' },
+    // Removed this line so I can add paths to my tsconfig file
+    // paths: { value: undefined, reason: 'aliased imports are not supported' },
   };

Answer 7

对于 macOS，此解决方法应该可行。

package.json

"scripts": {
  "start": "osascript -e 'tell app \"Terminal\" to do script \"cd $PATH_TO_REACT_APP && node ./setNoEmitFalse\"' && react-scripts start",
  ...
},
...

setNoEmitFalse.js

const fs = require('fs');
const { sleep } = require('sleep')
const path = './tsconfig.json'
const run = async () => {
  sleep(2)
  const tsconfig = fs.readFileSync(path, 'utf-8');
  const fixed = tsconfig.replace('"noEmit": true', '"noEmit": false');
  fs.writeFileSync(path, fixed)
}
run()

在单独的终端 (osascript) 中执行 javascript 文件为原始终端中的 react-scripts 提供正常输出。

如何配置react-script使其不覆盖'start'上的tsconfig.json

7 个答案: