我目前正在使用create-react-app引导我的一个项目。基本上，我试图通过将这些添加到由 create-react-app 生成的默认 tsconfig.json 中来设置 tsconfig.json 中的路径：
"baseUrl": "./src",
"paths": {
"interfaces/*": [
"common/interfaces/*",
],
"components/*": [
"common/components/*",
],
},
但是，每次我运行yarn start基本上运行react-scripts start时，它都会删除我的更改并再次生成默认配置。
如何告诉 create-react-app 使用我的自定义配置？
我可以通过使用这个问题的建议来做到这一点。
将配置选项反应脚本喜欢删除在一个单独的文件（例如paths.json）并通过扩展指令从tsconfig.json 引用它。
路径.json：
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"interfaces/*": [ "common/interfaces/*"],
"components/*": [ "common/components/*"],
}
}
}
tsconfig.json
{
"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
我能够直接将我的 baseUrl 和路径配置添加到我的tsconfig.json文件中，如下所示：
{
"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）。
对我来说，问题在于 VSCode 使用的是旧版本的 typescript (4.0.3)，而项目附带的 typescript 版本是 (4.1.2)。
以下为我做了诀窍：
在 Botpress（使用 react-scripts 4.0.3）上，我们结合使用 2 个技巧来使用路径，而无需弹出或修补代码。正如 Glenn 和 Microcipcip 所说，第一步是扩展 tsconfig.json 文件
tsconfig.path.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"~/*": ["src/*"],
"common/*": ["../bp/src/common/*"]
}
}
}
tsconfig.json
{
...
"extends": "./tsconfig.paths.json"
}
然后让它在后台工作，使用 package react-app-rewired。它允许在不实际弹出 CRA 的情况下对 webpack 配置进行微调。
配置覆盖.js
module.exports = {
webpack: (config, env) => {
config.resolve.alias['common'] = path.join(__dirname, '../bp/dist/common')
config.resolve.alias['~'] = path.join(__dirname, './src')
}
}
要查看完整代码，您可以查看 github 存储库https://github.com/botpress/botpress/tree/master/packages/ui-admin
对于 macOS，此解决方法应该有效。
包.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 提供了正常输出。
转到 node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js 并替换
const compilerOptions = {
...
};
经过
const compilerOptions = { };