Webpack HRM 打字稿重新编译问题

Question

我正在使用 webpack babel typescript react，一切正常，但是当开发模式下的热重载无法重新编译 ts 文件时我遇到了问题，假设我有一个这样的模型

type Model = {
   prop: string;
}

运行项目向我展示了 'Compilled successfully' 但如果我需要将此道具更改为数字，

type Model = {
   prop: number;
}

我会收到

[tsl] ERROR in /src/app/modules/home/home.component.tsx(14,57)
TS2322: Type 'number' is not assignable to type 'string'.

直到我完全reload/rebuild这个项目

这个错误才会消失

此外，我注意到只有当我将模型拆分为单独的文件时才会发生这种情况，例如：

src/foo.component.ts
src/foo.model.ts

在这种情况下，我会在重新加载构建之前收到此错误，但如果我将模型与组件放在同一文件中，则不会出现任何错误

这是我的tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "target": "ES2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "paths": {},
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "@types"]
}

那么如何让它在不完全重新启动项目的情况下根据类型更改重新编译文件？

Answer 1

通过添加 ForkTsCheckerWebpackPlugin 解决了

Webpack HRM 打字稿重新编译问题

Webpack HRM typescript recompile issue

compiler-errors

compilation

typescript

reactjs

webpack