node.js - Webpack TypeScript module.hot 不存在

Question

我想在一个用TypeScript编写的NodeJS项目中启用Webpack HMR。

但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已更新：

• 在此 PRmodule中解决了冲突

• 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 需要重启