Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Webpack 网页包的主干/木偶根布局错误_Webpack_Marionette - Fatal编程技术网

Webpack 网页包的主干/木偶根布局错误

Webpack 网页包的主干/木偶根布局错误,webpack,marionette,Webpack,Marionette,我有一个主干网/木偶应用程序,我一直在用RequireJS开发,我正在把它转换成网页包。Webpack很好地打包了我的代码,但是当我尝试加载打包的JS时,它遇到了一个错误,布局的DOM无法找到一个核心区域。错误消息是“一个“el”#内容必须存在于DOM中” 我的源代码的删节版本如下: HTML: 我目前使用的是木偶3.0.0-pre.3版,但在切换到Webpack之前,它没有任何问题-可能相关,也可能无关。关于我如何解决这个问题的想法 谢谢事实证明,我对init.js文件所做的一项更改导致了这个

我有一个主干网/木偶应用程序,我一直在用RequireJS开发,我正在把它转换成网页包。Webpack很好地打包了我的代码,但是当我尝试加载打包的JS时,它遇到了一个错误,布局的DOM无法找到一个核心区域。错误消息是“一个“el”#内容必须存在于DOM中”

我的源代码的删节版本如下:

HTML:

我目前使用的是木偶3.0.0-pre.3版,但在切换到Webpack之前,它没有任何问题-可能相关,也可能无关。关于我如何解决这个问题的想法


谢谢

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

编辑:我在转换应用程序的过程中走得更远了——因为它运行在节点服务器上,所以我决定将我所有的RequireJS模块定义转换为CommonJS,这个问题再次出现。在我的头撞到墙上几个小时后,我意识到问题在于我的视图在它所在的HTML元素实际加载之前就被附加到DOM上了。围绕init代码的简单$(document).ready包装器才是真正的解决方案(实际上我只是将我的webpack包的脚本标记移到了HTML的底部)


tl;dr-RequireJS使您无需在开始处理DOM之前确保DOM已准备就绪,而CommonJS则不需要。异步与同步。

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

编辑:我在转换应用程序的过程中走得更远了——因为它运行在节点服务器上,所以我决定将我所有的RequireJS模块定义转换为CommonJS,这个问题再次出现。在我的头撞到墙上几个小时后,我意识到问题在于我的视图在它所在的HTML元素实际加载之前就被附加到DOM上了。围绕init代码的简单$(document).ready包装器才是真正的解决方案(实际上我只是将我的webpack包的脚本标记移到了HTML的底部)


tl;dr-RequireJS使您无需在开始处理DOM之前确保DOM已准备就绪,而CommonJS则不需要。异步vs同步。

我尝试切换,并在我的木偶应用程序中定义根应用程序el-我在那里遇到了相同的错误。这让我觉得主干网对jquery的使用有些混乱。调试时遇到问题,因为每个断点都会出于某种原因出现在handlebar.js中。我尝试切换,并在我的木偶应用程序中定义根应用程序el-我在那里遇到了相同的错误。这让我觉得主干网对jquery的使用有些混乱。调试时遇到问题,因为每个断点都会出于某种原因出现在handlebar.js中。
<!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>
var RootLayout = Marionette.View.extend({
    el: 'body',

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

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