[英]Webpack TypeScript module.hot does not exist
I want to enable Webpack HMR in a NodeJS project written in TypeScript .我想启用的WebPack HMR在项目的NodeJS写的打字稿。
But module.hot
is not available:但是
module.hot
不可用:
@types/webpack-env defines: @types/webpack-env定义:
declare var module: __WebpackModuleApi.Module
Which conflicts with @types/node definition:这与@types/node定义冲突:
declare var module: NodeModule
Removing @types/node , solves the issue, but disables process
:删除@types/node ,解决了这个问题,但禁用了
process
:
process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process'
As few guys wrote here it's the best way:正如少数人在这里写的那样,这是最好的方法:
npm i -D @types/webpack-env
For me it works as expected, resolving issue with not recognized hot
property.对我来说,它按预期工作,解决了无法识别
hot
属性的问题。
In my project I'm using those versions:在我的项目中,我使用了这些版本:
"@types/node": "^8.0.19",
"@types/webpack-env": "^1.13.0"
I don't know if question is still up to date but for my problem installing types for webpack help me.我不知道问题是否仍然是最新的,但是对于我的问题,为 webpack 安装类型可以帮助我。
@types/webpack-env was since updated: @types/webpack-env已更新:
process
was added in this commit在此提交中添加了
process
The code in the original question now only needs @types/webpack-env .原始问题中的代码现在只需要@types/webpack-env 。
But importing @types/node alongside won't conflict anymore.但是同时导入@types/node不会再发生冲突。
npm install --save-dev @types/webpack-env
And if you also need NodeJS environment definitions:如果您还需要 NodeJS 环境定义:
npm install --save-dev @types/node
可能就像在文件顶部添加以下行一样简单。
///<reference types="webpack-env" />
You can augment the global scope and use interface merging to reopen the NodeModule
interface and add the missing hot
property.您可以增加全局范围并使用接口合并重新打开
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;
// ...
}
}
}
But really, this augmentation should potentially be done in the Webpack declaration file itself.但实际上,这种扩充应该在 Webpack 声明文件本身中完成。
Change .hot by ['hot']将 .hot 更改为 ['hot']
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => {
Use使用
if (module['hot']) {
module['hot'].accept();
module['hot'].dispose(() => {
This fixes it这修复了它
yarn add @types/webpack-env --dev
VScode would work immediately VScode 会立即工作
Intellij would need a restart Intellij 需要重新启动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.