为什么Babel在React-hot-loader中没有编译某些功能?

卡米尔·拉托辛斯基(Kamil Latosinski)

我正在使用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
        })
    ]
};
JuhoVepsäläinen

这是一个与变换相关的问题。它修补方法就好了。问题在于,在这种情况下,fetchUser = (e) => {生成的代码或多或少等于您的绑定constructorreact-transform不打补丁constructor(按定义运行一次)。

也许有一天该问题将得到解决,但目前这样的代码尚无法解决。基于功能的组件也存在问题,因为安装程序也无法修补这些组件。

解决此问题的一种方法是将状态管理推到其他位置,并在可能时依靠标准方法。对标准方法进行修补就可以了,您可以通过实现热加载界面(几行代码)来使Redux HMR之类的解决方案轻松兼容。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Babel 6中使用react-hot-loader

来自分类Dev

使用 React-hot-loader 3、React-router 4 和 Webpack-hot-middleware 进行 React Hot Reload

来自分类Dev

React-hot-loader:`hot`找不到您提供的`module`的`name`

来自分类Dev

为什么python给我Hot而不是真的Hot?

来自分类Dev

react-hot-loader 检查正确但未更新

来自分类Dev

使用 react-hot-loader v3 和 webpack-hot-middleware 未定义错误开发错误

来自分类Dev

尝试使用webpack ignorePlugin从最终捆绑包中删除“ react-hot-loader”

来自分类Dev

React-hot-loader 不适用于 React-router-dom

来自分类Dev

为什么tensorflow.one_hot不稀疏?

来自分类Dev

为什么某些stacktrace在Java中没有行号

来自分类Dev

为什么某些指标没有显示在Unity中?

来自分类Dev

为什么babel-loader是webpack的一部分,而不是babel本身?

来自分类Dev

One Hot Encoding和pandas.categorical.code有什么区别

来自分类Dev

为什么没有React的“类”道具?

来自分类Dev

webpack“ --watch”与“ --hot”的区别是什么?

来自分类Dev

为什么拖拽功能在 jQuery 中没有触发

来自分类Dev

无法弄清楚为什么功能的某些部分没有被覆盖,流程

来自分类Dev

Webpack:使用react-hot和babel使用多个加载器定义'查询'

来自分类Dev

尽管正在监视文件,但无法在浏览器中启用带有react-hot的HotModuleReplace插件

来自分类Dev

应用程序编译时没有协议功能-为什么?

来自分类Dev

为什么编译后没有.o?

来自分类Dev

为什么这个类没有编译?

来自分类Dev

具有多个标签的 One-Hot 编码功能

来自分类Dev

无法在Arch中禁用gnome hot corner

来自分类Dev

在Erlang Hot Code Reload功能中触发更新消息

来自分类Dev

可操作的:在“单元”功能中获取HoT对象

来自分类Dev

为什么pygame中的群组列表必须具有“更新”功能,而没有其他功能?

来自分类Dev

为什么没有strnchr功能?

来自分类Dev

纯功能,为什么没有优化?

Related 相关文章

  1. 1

    在Babel 6中使用react-hot-loader

  2. 2

    使用 React-hot-loader 3、React-router 4 和 Webpack-hot-middleware 进行 React Hot Reload

  3. 3

    React-hot-loader:`hot`找不到您提供的`module`的`name`

  4. 4

    为什么python给我Hot而不是真的Hot?

  5. 5

    react-hot-loader 检查正确但未更新

  6. 6

    使用 react-hot-loader v3 和 webpack-hot-middleware 未定义错误开发错误

  7. 7

    尝试使用webpack ignorePlugin从最终捆绑包中删除“ react-hot-loader”

  8. 8

    React-hot-loader 不适用于 React-router-dom

  9. 9

    为什么tensorflow.one_hot不稀疏?

  10. 10

    为什么某些stacktrace在Java中没有行号

  11. 11

    为什么某些指标没有显示在Unity中?

  12. 12

    为什么babel-loader是webpack的一部分,而不是babel本身?

  13. 13

    One Hot Encoding和pandas.categorical.code有什么区别

  14. 14

    为什么没有React的“类”道具?

  15. 15

    webpack“ --watch”与“ --hot”的区别是什么?

  16. 16

    为什么拖拽功能在 jQuery 中没有触发

  17. 17

    无法弄清楚为什么功能的某些部分没有被覆盖,流程

  18. 18

    Webpack:使用react-hot和babel使用多个加载器定义'查询'

  19. 19

    尽管正在监视文件,但无法在浏览器中启用带有react-hot的HotModuleReplace插件

  20. 20

    应用程序编译时没有协议功能-为什么?

  21. 21

    为什么编译后没有.o?

  22. 22

    为什么这个类没有编译?

  23. 23

    具有多个标签的 One-Hot 编码功能

  24. 24

    无法在Arch中禁用gnome hot corner

  25. 25

    在Erlang Hot Code Reload功能中触发更新消息

  26. 26

    可操作的:在“单元”功能中获取HoT对象

  27. 27

    为什么pygame中的群组列表必须具有“更新”功能,而没有其他功能?

  28. 28

    为什么没有strnchr功能?

  29. 29

    纯功能,为什么没有优化?

热门标签

归档