Ошибки компоновки корневой/марионеткой с помощью Webpack

У меня есть приложение Backbone/Marionette, которое я разрабатывал с помощью RequireJS, и я работаю над его преобразованием в Webpack. Webpack красиво упаковывает мой код, но когда я пытаюсь загрузить пакетный JS, он попадает в ошибку, когда DOM макета не может найти одну из основных областей. Сообщение об ошибке «An» должно находиться в 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

Я попытался переключить вещи и определить корневое приложение el в своем приложении Marionette.Application - у меня там такая же ошибка. Это заставляет меня думать, что что-то испортилось с использованием jQuery. У меня возникла проблема с отладкой, потому что по какой-то причине каждая точка останова появляется в handlebars.js. –

Оказывается, один из изменений, которые я сделал в моей init.js файл вызвал вопрос каким-то образом. Я использовал вложенные запросы для загрузки зависимостей amd в правильном порядке, и я переключил способ, которым он работал, чтобы изменить вывод кусков. Отмена этого изменения решила проблему.

Редактировать: Я пошел дальше по пути преобразования моего приложения, потому что он работает на сервере Node. Я решил преобразовать все определения модуля RequireJS в CommonJS, и этот вопрос снова поднял свою уродливую голову. Спустя несколько часов после того, как я ударился головой о стену, я понял, что проблема заключается в том, что мой взгляд был привязан к DOM до того, как элемент HTML, в котором он живет, был фактически загружен. Простая обертка $ (document) .ready вокруг моего кода инициализации была реальным решением (я на самом деле просто переместил тег сценария для моего пакета веб-пакетов в нижней части HTML).

tl; dr - RequireJS изолирует вас от необходимости убедиться, что ваш DOM готов, прежде чем вы начнете возиться с ним, в то время как CommonJS этого не делает. Async vs sync.

источник

2016-07-31 16:16:01

Ошибки компоновки корневой/марионеткой с помощью Webpack

ответ

Смежные вопросы