我目前正在使用create-react-app引导我的一个项目。基本上，我试图通过将这些添加到由 create-react-app 生成的默认 tsconfig.json 来在 tsconfig.json 中设置路径：
"baseUrl": "./src",
"paths": {
"interfaces/*": [
"common/interfaces/*",
],
"components/*": [
"common/components/*",
],
},
但是，每次我运行yarn startwhich 基本上运行时react-scripts start，它都会删除我的更改并再次生成默认配置。
如何告诉 create-react-app 使用我的自定义配置？
将 react 脚本喜欢删除的配置选项放在一个单独的文件（例如，paths.json）中，并通过 extends 指令从 tsconfig.json 中引用它。
路径.json：
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"interfaces/*": [ "common/interfaces/*"],
"components/*": [ "common/components/*"],
}
}
}
配置文件
{
"extends": "./paths.json"
...rest of tsconfig.json
}
Create React App 目前不支持baseUrl. 但是，有一个解决方法...要baseUrl为 webpack 和 IDE进行设置，您必须执行以下操作：
.env使用以下代码创建一个文件：NODE_PATH=./
tsconfig.paths.json包含以下代码的文件：{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"src/*": ["*"]
}
}
}
tsconfig.json{
"extends": "./tsconfig.paths.json",
...
}
你不能，我不确定你什么时候可以。我一直在尝试使用 baseUrl 和路径，这样我就可以避免相对导入，但正如您所看到的，它们是故意删除某些值。“（还）”令人鼓舞，但（叹气）谁知道他们什么时候会正式支持它。我建议订阅这个 github问题，以便在发生变化时/当它发生变化时收到警报。
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)
如果您像我一样使用 react-scripts 4.0.0，那么您需要做的就是删除该行（大约在我这边的第 160 行）：
paths: { value: undefined, reason: 'aliased imports are not supported' }
从文件 node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
我能够tsconfig.json像这样直接将我的 baseUrl 和路径配置添加到我的文件中：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@domain/*": ["../src/domain/*"],
},
}
}
最后编译并继续我的生活。
按照惯例，YMMV。请测试你的东西。这显然是一个黑客，但它对我有用，所以我在这里发帖以防它对某人有所帮助。
如果您想与您的团队分享，这里有一个补丁：
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' },
};
根据@Bartekus 在评论线程中的深思熟虑的建议，当我需要将（可能）这样的临时更改添加到 npm 包时，我正在添加有关我使用的包的信息：patch-package
包本质上提供了一种以更清晰的方式对包进行更改的方法。特别是当您考虑协作时，直接更改 npm 文件并继续前进会变得非常麻烦。下次更新该包时，甚至在新机器上开始开发并运行时，npm install您的更改都将丢失。此外，如果您的团队成员在同一个项目上工作，他们将永远不会继承更改。
本质上，您要通过以下步骤来修补软件包：
# fix a bug in one of your dependencies
vim node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
# run patch-package to create a .patch file
npx patch-package react-scripts
# commit the patch file to share the fix with your team
git add patches/react-scripts+4.0.0.patch
git commit -m "Enable aliased imports in react-scripts"
下次有人签出项目并安装它时，由于您在设置期间添加的安装后脚本，补丁将自动应用：
"scripts": {
+ "postinstall": "patch-package"
}
查看软件包文档中的最新说明
我遇到了与这个一般问题类似的问题（CRA"noEmit": false在我tsconfig.json正在处理的 React 库中覆盖了两个单独的构建，一个用于本地开发，另一个用于构建带有类型的生产库）。简单的解决方案：使用sed的postbuild脚本package.json。例如：在 OS X 上使用 sed 进行就地编辑。
{
...
"scripts": {
...
"postbuild": "sed -i '' 's/{THING CRA IS REPLACING}/{WHAT YOU ACTUALLY WANT}/g' tsconfig.json # CRA is too opinionated on this one.",
...
}
...
}
但是，这种方法不是跨平台的（与rimraf的跨平台替代方法不同rm -rf）。