让 marionette.backbone 与 webpack 热模块替换一起工作

Question

我使用了 here 中的示例项目来设置一个带有热模块替换的 webpack 项目。然后我设置了一个示例 backbone 应用程序。

// main.js
import $ from 'jquery';
import Backbone from 'backbone';

import Router from './router';

window.app = window.app || {};

const app = new Backbone.Marionette.Application();
app.addRegions({content: '#content'});

app.on('start', () => {
    if (Backbone.history)
      Backbone.history.start({ pushState: true })
}

);

app.addInitializer(() => {
  return new Router();
});


$( () => { app.start() });

// HMR
if (module.hot) {
    module.hot.accept();
}

根据 [HMR] connected 调试输出，我可以看到 HRM 加载正常。当文件更改时，我可以看到它正在根据以下输出重建并将更新推送到客户端：

[HMR] Updated modules:
process-update.js?e13e:77 [HMR]  - ./app/backbone/views/template.hbs
process-update.js?e13e:77 [HMR]  - ./app/backbone/views/hello.js
process-update.js?e13e:77 [HMR]  - ./app/backbone/router.js

但是屏幕没有重新加载。没有任何反应。

知道如何让它工作吗？或者 HMR 应该只适用于 React？

Answer 1

它有点诡异，但你可以让它与 backbone 一起使用。博客 post 是 here that explains it fairly well。（免责声明，我写的）

简而言之，您需要明确告诉您的父视图您可以接受热重载，然后您重新require那个新的热重载视图，关闭现有的子视图，然后重新渲染它。下面的示例使用 Ampersand，但相同的基本原则适用于 Marionette 或 vanilla Backbone

/* parent.view.js */
var ChildView = require('./child.view.js');
var ParentView = AmpersandView.extend({
    template : require('path/to/template.hbs')

    initialize: function(){
        var self = this;
        if(module.hot){
            module.hot.accept('./child.view.js', function(){
                // re-require your child view, this will give you the new hot-reloaded child view
                var NewChildView = require('./child.view.js');
                // Remove the old view.  In ampersand you just call 'remove'
                self.renderChildView(NewChildView);
            });
        }
    },

    renderChildView(View){
        if(this.child){
            this.child.remove();
        }
        // use passed in view
        var childView = new View({
            model: this.model
        });
        this.child = this.renderSubview(childView, this.query('.container'));
    } 

    render: function(){
        this.renderWithTemplate(this);
        renderChildView(ChildView);
        return this;
    }
});

```

让 marionette.backbone 与 webpack 热模块替换一起工作

Getting marionette.backbone to work with webpack hot module replacement

backbone.js

webpack

webpack-dev-server

webpack-hmr