獲取marionette.backbone與webpack熱模塊更換

我使用here的示例項目來設置熱模塊更換的webpack項目。然後我建立了一個示例骨幹應用程序。獲取marionette.backbone與webpack熱模塊更換

// 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調試輸出。當一個文件的變化，我可以看到，它的重建，推動更新基於以下輸出客戶端：

[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一起工作？

來源

2016-01-24 Grim

看來，骨幹不支持HMR開箱和代碼必須被添加到重裝處理意見類似的方式react-hot-loader工作 – Grim

這有點竅門，但你可以讓它與主幹一起工作。博客文章是here that explains it fairly well。（免責聲明，我寫了）

總之，你需要明確地告訴你的父視圖，你可以接受熱重載，然後你重新require新熱重載視圖，關閉你現有的子視圖，重新渲染它。下面的示例使用與號，但相同的基本原則適用於木偶或香草骨幹

/* 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; 
    } 
});

```

來源

2016-09-07 11:42:32

好博客文章！ – jpunk11

獲取marionette.backbone與webpack熱模塊更換

回答

相關問題