使用includes，extends和blocks时，jade脚本加载序列似乎很麻烦

Question

好的，我将尽可能地尝试简化这个例子。这是我的问题。 我正在使用节点和用jade表达来生成html。我有一个main layout.jade文件，它在正文的末尾包含：

block scripts
  script(src='/javascripts/libs/jquery-1.8.1.min.js')

然后我有一个jade partial（_shapes.jade），它有以下代码：

block append scripts
  script(src='/javascripts/wire.js')

然后我有我的jade文件（properties_panel.jade）生成html：

extends ../layout

include _shapes

block controls
  include ../_controls

wire.js文件需要运行jQuery。 来自jade的html输出正如我所期望的那样。我在body标签的末尾有一个脚本标记块，并且顺序正确（jQuery优先）。

问题是浏览器没有首先加载jQuery。但是，它似乎也在jQuery加载后再次加载文件。我推断出这是因为我的wire.js文件包含在一个自执行的匿名函数中，如下所示：

!function (context, $) {
  console.log($);
}(this, window.jQuery);

在我的控制台中，我得到2个日志。第一个说'undefined'，第二个正确记录jQuery。

所以这是奇怪的部分。如果我从我的_shapes.jade中注释掉脚本行，而是在jQuery导入行之后将它添加到layout.jade文件中，它会生成完全相同的html文件，但是所有内容都按照正确的顺序加载。

使用chrome开发人员工具，我可以在资源选项卡中看到加载顺序，即使html根本没有改变，加载顺序也会根据jade文件生成相同的html的方式而改变。

我做错了吗？我对玉来说比较新，所以我很可能会这样。

谢谢！

Answer 1

您应该在形状中使用'extends layout'：

extends layout

block append scripts
   script(src='/javascripts/wire.js')