Reactjs 如何配置react脚本，使其不会'；t在'；启动'；

我目前正在使用

create react app

引导我的一个项目。基本上，我正在尝试在tsconfig.json中设置路径，方法是将这些路径添加到create react app生成的默认tsconfig.json中：

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

但是，每次我运行基本上运行

react scripts start

的

warn start

时，它都会删除我的更改并再次生成默认配置

---

我如何告诉create react应用程序使用我的自定义配置？

我可以使用来自的建议来实现这一点

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

path.json：

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

tsconfig.json

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

---

你不能，我不确定你什么时候能做到。我一直在尝试使用baseUrl和路径，以避免相对导入，但正如您所看到的，它们有意删除某些值。“还”是令人鼓舞的，但是（叹气）谁知道他们什么时候会正式支持它呢。我建议，如果/当此情况发生变化时，应提醒问题

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)

---

Create React应用程序当前不支持

baseUrl

。但是，有一个解决方法…要为webpack和IDE设置

baseUrl

，您必须执行以下操作：

使用以下代码创建

.env

文件：

创建一个

tsconfig.path.json文件，其中包含以下代码：

将以下行添加到

tsconfig.json

---

我有一个与这个一般问题类似的问题（CRA在我正在处理的React库的

tsconfig.json

中覆盖了

“noEmit”：false

，其中我有两个独立的构建，一个用于本地开发，另一个用于构建带有打字的产品库）。简单的解决方案：在

package.json

中的

postbuild

脚本中使用

sed

。例如：

---

然而，这种方法不是跨平台的（与

rimraf

是

rm-rf

的跨平台替代方案不同）。

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

路径：{值：未定义，原因：'不支持别名导入'}

从文件

节点\u modules/react scripts/scripts/utils/verifyTypeScriptSetup.js

我可以直接将baseUrl和路径配置添加到我的

tsconfig.json

文件中，如下所示：

{
“编译器选项”：{
“baseUrl”：“，
“路径”：{
“@domain/*”：[”。/src/domain/*”]，
},
}
}

最后，我将继续我的生活

通常情况下，YMMV。请测试一下你的东西。这显然是一个黑客，但它为我工作，所以我张贴在这里，以防它帮助别人

如果您想与您的团队分享，这里有一个补丁：

diff--git a/node_modules/react scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react scripts/scripts/utils/verifyTypeScriptSetup.js
索引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 17中支持新的JSX转换，
},
-路径：{值：未定义，原因：'不支持别名导入'}，
+//删除了此行，以便我可以向tsconfig文件添加路径
+//路径：{值：未定义，原因：'不支持别名导入'}，
};

编辑 根据@Bartekus在评论线程中的深思熟虑的建议，当我需要向npm包中添加（可能的）临时更改时，我正在添加关于我使用的包的信息：

包本质上提供了一种以更干净的方式对包进行更改的方法。特别是当您考虑协作时，直接更改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"
 }

---

有关macOS，请参阅

中的最新说明。此解决方法应能奏效

package.json

“脚本”：{
“开始”：“osascript-e”告诉应用程序\“终端\”执行脚本\“cd$PATH \'u to \'u REACT \'u app&&node./setNoEmitFalse \'&&REACT scripts start”，
...
},
...

setNoEmitFalse.js

const fs=require（'fs'）；
const{sleep}=require（'sleep'）
常量路径='./tsconfig.json'
const run=async（）=>{
睡眠（2）
const tsconfig=fs.readFileSync（路径“utf-8”）；
const fixed=tsconfig.replace（'noEmit:true'，'noEmit:false'）；
fs.writeFileSync（路径，固定）
}
运行（）

---

在单独的终端（osascript）中执行javascript文件为原始终端中的react脚本提供了正常输出。

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

下面是我的诀窍：

转到命令选项板CTRL+Shift+P

选择“类型脚本：选择类型脚本版本…”

选择“使用工作区版本”

---

从文档中，>您不需要创建tsconfig.json文件，我们会为您创建一个。您可以编辑生成的TypeScript配置。不幸的是，如果您编辑该文件，它会被Thread start覆盖，丢弃任何更改。正如@Glenn所说，Tconfig文件会重置。即使在tsconfig.json-fi中使用“扩展”

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

{
    ...
    "scripts": {
        ...
        "postbuild": "sed -i '' 's/{THING CRA IS REPLACING}/{WHAT YOU ACTUALLY WANT}/g' tsconfig.json # CRA is too opinionated on this one.",
        ...
    }
    ...
}

# 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"
 }