使用Webpack進行主幹/木偶根部佈局錯誤

我有一個使用RequireJS開發的Backbone/Marionette應用程序，我正在將其轉換爲Webpack。 Webpack很好地打包了我的代碼，但是當我嘗試加載打包的JS時，它在佈局的DOM無法找到某個核心區域時發生錯誤。錯誤消息是「An」el「＃內容必須存在於DOM中」。使用Webpack進行主幹/木偶根部佈局錯誤

一個滅掉我的源的版本如下：

HTML：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <script type="text/javascript" src="/public/app/bundle.js"></script> 
    </head> 
    <body> 
     <div id="content" class="content"></div> 
    </body> 
</html>

JS：

var RootLayout = Marionette.View.extend({ 
    el: 'body', 

    regions: { 
     content: '#content' 
    } 
}); 

new RootLayout().getRegion('content').show(someView);

我與木偶V3.0.0-pre.3工作目前，但在切換到Webpack之前沒有任何問題 - 它可能相關也可能不相關。關於如何解決問題的想法？

感謝

來源

2016-07-31 Benjamin Valyou

我試着切換東西，並在我的Marionette.Application中定義根應用程序el - 我在那裏得到了同樣的錯誤。這讓我覺得有些事情與骨幹對jQuery的使用混爲一談。我在調試時遇到了麻煩，因爲出於某種原因，每個斷點都出現在handlebars.js中。 –

原來的我對init.js文件所做的變化之一導致此問題莫名其妙。我正在使用嵌套需求以正確的順序加載amd依賴項，並且我改變了它正在改變塊輸出的方式。恢復該更改可解決問題。

編輯：我已經走了更遠的轉換我的應用程序的路徑 - 因爲它在節點服務器上運行，我決定將我的所有RequireJS模塊定義轉換爲CommonJS，並且此問題再次引發了其醜陋的頭部。經過幾個小時的攻擊，我意識到這個問題是我的觀點是在HTML元素被加載之前被附加到DOM。我的init代碼中一個簡單的$（document）.ready wrapper是真正的解決方案（我實際上只是將我的webpack包的腳本標記移到了HTML的底部）。需要確保DOM在開始搞亂之前已經準備就緒，而CommonJS則不需要。異步與同步。

來源

2016-07-31 16:16:01

使用Webpack進行主幹/木偶根部佈局錯誤

回答

相關問題