Webpack TypeScript module.hot 不存在

Question

我想启用的WebPack HMR在项目的NodeJS写的打字稿。

但是module.hot不可用：

• @types/webpack-env定义：

   declare var module: __WebpackModuleApi.Module

• 这与@types/node定义冲突：

   declare var module: NodeModule

删除@types/node ，解决了这个问题，但禁用了process ：

process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process'

Answer 1

正如少数人在这里写的那样，这是最好的方法：

npm i -D @types/webpack-env

对我来说，它按预期工作，解决了无法识别hot属性的问题。

在我的项目中，我使用了这些版本：

"@types/node": "^8.0.19",
"@types/webpack-env": "^1.13.0"

我不知道问题是否仍然是最新的，但是对于我的问题，为 webpack 安装类型可以帮助我。

Answer 2

冲突解决

@types/webpack-env已更新：

• 在 这个 PR中解决了module冲突

• 在此提交中添加了process

原始问题中的代码现在只需要@types/webpack-env 。

但是同时导入@types/node不会再发生冲突。

---

安装

npm install --save-dev @types/webpack-env

如果您还需要 NodeJS 环境定义：

npm install --save-dev @types/node

Answer 3

可能就像在文件顶部添加以下行一样简单。

///<reference types="webpack-env" />

Answer 4

您可以增加全局范围并使用接口合并重新打开NodeModule接口并添加缺少的hot属性。

import webpack = require("webpack");

declare global {
    interface NodeModule {
        hot: {
            accept(dependencies: string[], callback: (updatedDependencies: string[]) => void): void;
            accept(dependency: string, callback: () => void): void;
            accept(errHandler?: (err: any) => void): void;
            decline(dependencies: string[]): void;
            decline(dependency: string): void;
            decline(): void;

            dispose(callback: (data: any) => void): void;
            addDisposeHandler(callback: (data: any) => void): void;

            removeDisposeHandler(callback: (data: any) => void): void;
            // ...
        }
    }
}

但实际上，这种扩充应该在 Webpack 声明文件本身中完成。

Answer 5

将 .hot 更改为 ['hot']

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {

使用

if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {

Answer 6

这修复了它

yarn add @types/webpack-env --dev

VScode 会立即工作

Intellij 需要重新启动