静态Javascript在使用Express/Node.js的Jade模板引擎中未渲染出来。

Question

希望您一切安好。

我突然无法在jade模板中呈现任何外部javascript！为了找出问题的根源，我将其剥离到最少：

Node 0.6.11，Express 2.5.8，jade 0.20.3

app.js

var express = require('express')
, routes = require('./routes');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

app.get('/', function(req, res){
  res.render('index', { title: 'Express' });
});

app.listen(3000);

layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='/javascripts/script.js')
  body!= body

script.js

alert('hello!');

在我运行服务器并加载http://localhost:3000/时，我应该立即收到“hello！”消息，但它直接运行到正常页面。 此外，如果我手动输入

script
  alert('hello!')

将内容添加到layout.jade模板中后，我收到了应有的消息。只是静态脚本没有加载。我确信'script.js'在'/public/javascripts/'中，就像它应该在的位置一样。任何建议都非常受欢迎！提前致谢。

- Petrov

---

如果您使用Firebug或Chrome的检查器，您能看到JS文件加载时出现了任何错误吗？ - loganfsmyth

@loganfsmyth 感谢您的评论！在 Firebug 中，地址已列出，但我无法单击访问文档。没有错误... - Petrov

如果您只是在浏览器中键入URL，您能看到脚本吗？此外，当您说它们被列出时，您是指您可以看到脚本标记吗？您应该还能够在其中看到网络请求。也许可以查看请求是否具有成功的数据响应。 - loganfsmyth

你可能已经检查过了，但每次我遇到这个问题时，都是与缩进有关。确保你使用的是两个空格而不是制表符。除此之外，我同意你应该查看写入HTML的内容以获取一些线索。 - feralcreature

Answer 1

您需要像这样从控制器中传递脚本：

app.get('/', function(req, res){
  res.render('index', { title: 'Express', scripts: ['javascripts/script.js']});
});

然后在您的layout.jade文件中:

- each s in scripts
    script(src=s)

- plus-

Answer 2

请确保您的JS文件作为静态资源公开。

在layout.jade中...

!!!5
html
   head
      script(src='js/helper.js')

在 app.js 中...

app.use(express.static(__dirname + '/public'));

我将“js”文件夹放在“public”文件夹下后，helper.js没有出现任何问题。虽然这很简单，但我对此完全不熟悉，一开始并没有意识到这点。

- Rob

Answer 3

为什么Jade脚本标签中有一个起始斜杠'/'？在您的脚本位于<root_dir>/public/javascripts/script.js的情况下，正确引用它的方式是script(src="javascripts/script.js")。至少在我的安装中是这样工作的。对于/public目录中的其他资源（如CSS或图像），也是如此。

- Neil

Answer 4

感谢Rob（您可以在上面找到他的答案），为我指明了正确的方向。我只想添加一些参考，以使它比任何魔法更自然。

在express文档这里中提到，如果要提供静态文件（如css、图像等），则需要使用声明。

app.use(express.static("_dirName"));

我在使用HTML代码中的图像时遇到了同样的问题。现在，它已经可以正常工作了。

- Blaze