Question

我有一个Backbone / Marionette应用程序，我一直在用RequireJS开发，我正在努力将它转换为Webpack。 Webpack很好地打包我的代码，但是当我尝试加载打包的JS时，它会遇到一个错误，即布局的DOM无法找到其中一个核心区域。错误消息是“An”el“#content必须存在于DOM中”。

我的来源的删除版本如下：

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);

我目前正在使用Marionette v3.0.0-pre.3，但在切换到Webpack之前没有任何问题 - 它可能相关也可能不相关。关于如何解决这个问题的想法？

由于

Answer 1

事实证明我对init.js文件所做的一项更改导致了问题。我正在使用嵌套的需求以正确的顺序加载amd依赖项，并且我改变了它的工作方式来更改块输出。恢复该更改解决了这个问题。

编辑：我已经越过了将我的应用程序转换过来的道路 - 因为它在节点服务器上运行我决定将我的所有RequireJS模块定义转换为CommonJS，并且这个问题得到了解决它再次丑陋的头脑。经过几个小时的抨击我的头撞墙，我意识到问题是我的视图是在它生存的HTML元素实际加载之前被附加到DOM。一个简单的$（document）.ready包装我的init代码是真正的解决方案（我实际上只是将我的webpack包的脚本标记移动到HTML的底部）。

tl; dr - 在开始搞乱之前，RequireJS绝对需要确保你的DOM已经准备就绪，而CommonJS并不是这样。异步vs同步。

Webpack的Backbone / Marionette Root布局错误

1 个答案: