反応ホットローダー中にバベルがいくつかの機能を揺らしていないのはなぜですか？

Question

私はtransform-class-propertiesを使用しています。私はボタンのテキストなどのようなものを変更するとすべてがうまく動作しますが、私はこのように見える機能を変更する場合：

class App extends React.Component { 

    fetchUser = (e) => { 
     axios.get('/api/test/' + this.state.username) 
      .then(function (response) { 
       console.log(response.data); 
      }).catch(function (response) { 
      console.log(response); 
     }); 
    }; 
} 

は、私は手動でページを更新するまで、影響はありません。コンソールに出力が表示されます。

[React Transform HMR] Patching App 
log-apply-result.js?d762:20 [HMR] Updated modules: 
log-apply-result.js?d762:22 [HMR] - 76 

ただし、リフレッシュするまで私の変更はありません。 この機能は動作していますが（変更クラスプロパティ）ですが、変更には不利です。 console.log('foobar');のようなものを追加してボタンを押すと何も起こりません。新しいことは何も起こらないということです。 ES6が意図したとおりにこの作業を理解している通常のクラスメソッド構文の構文を変更すると、 console.logがリフレッシュせずに「ライブ」されていることがわかります。これはreact-transform関連する問題である

const webpack = require('webpack'); 
const path = require('path'); 
const NpmInstallPlugin = require('npm-install-webpack-plugin'); 

const PATHS = { 
    app: path.join(__dirname, 'resources/assets/js'), 
    publicPath: path.join(__dirname, 'public') 
}; 

module.exports = { 
    entry: [ 
     "webpack-dev-server/client?http://localhost:4444", 
     "webpack/hot/dev-server", 
     PATHS.app 
    ], 
    output: { 
     path: PATHS.publicPath, 
     publicPath: '/js/', 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: "react-hot", 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.jsx?$/, 
       include: PATHS.app, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0', 'react-hmre'], // set of plugins out of the box 
        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
       } 
      } 
     ] 
    }, 
    devtool: 'eval-source-map', 
    devServer: { 
     contentBase: PATHS.publicPath, 
     historyApiFallback: true, 
     hot: true, 
     inline: true, 
     progress: true, 
     noInfo: false, 
     stats: 'errors-only', 
     host: process.env.HOST, 
     port: 4444, 
     proxy: { 
      "/api/*": "http://127.0.0.1:8000/" 
     } 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new NpmInstallPlugin({ 
      save: true 
     }) 
    ] 
}; 

Answer 1

：

これは私のwebpack.development.config.jsファイルです。それはちょうど良い方法をパッチします。問題は、この場合、fetchUser = (e) => {は、constructorでバインディングとほぼ同じコードを生成するということです。反応変換はconstructor（定義で1回実行）には適用されません。

問題は一日で解決されるかもしれませんが、現時点ではこのようなコードは機能しません。また、機能ベースのコンポーネントにも問題があります。これは、セットアップでもまだパッチを適用できないためです。

問題を回避する方法の1つは、状態管理を他の場所にプッシュし、可能であれば標準的な方法に依存することです。標準的な方法はちょっとうまくパッチが適用され、ホットローディングインターフェイス（2行のコード）を実装することで、Redux HMRなどのソリューションを簡単に互換性を持たせることができます。