web-dev-qa-db-ja.com

Webpack TypeScript module.hotは存在しません

NodeJSで記述されたプロジェクトでWebpack HMRを有効にしますTypeScript。

だが 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'
node.jstypescriptwebpackwebpack-hmr
24
kube

紛争解決

@ types/webpack-envが更新されました：

  • moduleの競合は this PR で解決されました

  • processが this commit に追加されました

元の質問のコードに必要なのは@ types/webpack-envのみです。

ただし、@ types/nodeを一緒にインポートしても競合することはありません。

Installation

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

NodeJS環境定義も必要な場合：

npm install --save-dev @types/node
19
kube

ここに書いている人はほとんどいないので、それが最良の方法です。

npm i -D @types/webpack-env

私にとっては、期待どおりに動作し、認識されないhotプロパティの問題を解決します。

私のプロジェクトでは、これらのバージョンを使用しています：

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

質問がまだ最新かどうかはわかりませんが、webpackのタイプをインストールすることで問題が解決します。

29
WooCaSh

ファイルの先頭に次の行を追加するだけで簡単にできます。

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

グローバルスコープを拡張し、インターフェイスマージを使用して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宣言ファイル自体で実行される可能性があります。

5
Daniel Rosenwasser

.hotを['hot']で変更

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

使用する

if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
1
Raúl Martín Ramos