Почему babel не транслирует некоторые функции во время реактивного жакета?

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 

Но моих изменений нет, пока не сделаю обновление. Эта функция работает (свойства transform-class-properties), но она неуязвима для изменений. Когда я добавляю что-то вроде console.log('foobar'); и нажимаю кнопку, ничего не происходит. Я имею в виду, что ничего нового не происходит. Когда я изменяю синтаксис для синтаксиса метода нормального класса, который ES6 понимает ЭТО РАБОТЫ, как и предполагалось, Я вижу console.log «вживую» без обновления, поэтому я думаю, что что-то не так во время процесса пересылки.

Это мой webpack.development.config.js файл:

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

Это react-transform проблема, связанная. Это исправляет методы просто отлично. Проблема в том, что в этом случае fetchUser = (e) => { генерирует код, который более или менее равен привязке на вашем constructor. реакция-преобразование не патч constructor (выполняется один раз по определению).

Возможно, проблема будет решена в один прекрасный день, но в настоящий момент такой код просто не работает. Существуют также проблемы с компонентами, основанными на функциях, поскольку установка также не может их исправлять.

Один из способов решения проблемы заключается в том, чтобы подтолкнуть управление государством в другом месте и, когда это возможно, опираться на стандартные методы. Стандартные методы легко исправляются, и вы можете легко сделать такие решения, как Redux HMR, путем реализации интерфейса горячей загрузки (пара строк кода).