为什么 babel 在 react-hot-loader 期间不转换某些功能？

Question

我正在使用转换-class-属性。当我更改按钮文本等内容时，一切正常，但是当我修改如下所示的函数时：

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

但是在我刷新之前，我的更改不存在。 此功能正在运行（转换-class-属性）但它不会受到更改的影响。当我添加 console.log('foobar'); 之类的内容并按下按钮时，没有任何反应。我的意思是没有新的事情发生。 当我更改正常 class 方法语法的语法时，ES6 按预期理解此工作， 我看到 console.log "live" 没有刷新，所以我认为转译过程中出现问题。

这是我的 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。 react-transform 不修补 constructor（运行根据定义一次）。

也许有一天问题会得到解决，但目前这样的代码还不能用。基于功能的组件也存在问题，因为安装程序也无法修补它们。

解决此问题的一种方法是将状态管理推到别处，并尽可能依赖标准方法。标准方法得到很好的修补，您可以通过实现热加载接口（几行代码）轻松地使 Redux HMR 等解决方案兼容。

为什么 babel 在 react-hot-loader 期间不转换某些功能？

Why babel is not transpiling some features during react-hot-loader?

webpack

babeljs

react-hot-loader