javascript - Node.JS/Express 应用程序中的 Jade 模板找不到外部 Javascript 文件？

Question

我有一个使用 Jade 模板引擎的 Node.JS/Express 应用程序。我有一个 Javascript 文件，位于包含 Jade View 的 views 目录正上方的目录中。鉴于下面的代码，我相信 View 应该能够找到引用的服务器端名为的Javascript文件common_routines，但是当 View 是请求时我收到 404 错误，指出无法找到外部 Javascript 文件。这让我很困惑，因为我认为 Jade 模板在服务器端执行，那么为什么这会从 Jade render() 调用中触发 404 错误？

这是 Jade View :

block content
    script(src="../common_routines.js")
    div(style="padding:5px")
        h4 #{product.name}
    if (product.brand != null)
        p Brand: #{product.brand}
    div(class="img_and_desc")
        img(src=product.imageUrl, class="product_image", align="left")
        if (product.minimumPrice == product.maximumPrice)
            p Price: #[strong #{product.minimumPrice}]
        else
            p Price: #[strong #{product.minimumPrice}] to #[strong #{product.maximumPrice}]
        if (product.cashBack > 0)
            p Cash Back amount: #[strong #{product.cashBack}]
        if (product.freeShipping)
            p(class="text-emphasized-1") *Free Shipping!
        if (product.onSale)
            p(class="text-emphasized-2") Discounted Item

以下是渲染 View 的路由文件中的调用片段，其中触发了 if (err) 分支:

           res.render(
                'ajax-product-details',
                locals,
                function (err, html) {
                    if (err)
                    // A rendering error occurred.
                        throw new Error("Rendering error(type:" + err.type + ", message: " + err.message);
                    else {
                        // Success. Send back the rendered HTML.
                        res.send(html);
                        return;
                    }
                });

这是我在 WebStorm 调试器控制台窗口 Pane 中看到的错误。请注意，它显示文件引用为 /common_routines.js 没有前面的“..”相对目录引用，尽管前面的“..”相对目录引用是在 Jade 文件引用中清晰可见 ("script(src="../common_routines.js")):

[Express][127.0.0.1][GET][DESKTOP] 2016-07-20T10:07:34.940Z /common_routines.js?_=1469009245957
(development error handler) Status code(404) message: Not Found

这是 common_routines.js 内容:

function truncateString(str, maxLen)
{
    if (str.length > maxLen)
        return str.substring(0, maxLen - 1) + '&hellip';
    return str;
}

module.exports =
{
    truncateString: truncateString
}

正如我所说，common_routines.js 位于 Jade View 正上方的目录中，那么此外部文件引用是否由于某种原因无效？:

script(src="../common_routines.js")

Answer 1

您只能在前端引用 public 文件夹中的静态文件(如果您已将静态资源设置为从该文件夹提供服务)。您可以将您的 common_routines.js 文件放在公共(public)文件夹中，例如public/js/。现在，您可以使用 script(src="/js/common_routines.js")

在 View 文件中引用它

如果您想使用 jade 文件中的函数，而不是前端 js 文件中的函数，则需要使用 var commonRoutines = require('../common_routines.js' 将其作为包包含在内); 在服务器端 js 文件中。现在，您可以将此对象变量与上下文对象一起传递到 View 文件。正如您所说，您在渲染时将 locals 对象传递给 View 文件，您可以这样做:

var common_routines = require('../common_routines.js');
var locals = { common_routines: common_routines };
res.render( 'ajax-product-details', locals);

现在，您可以在 ajax-product-details 文件中使用 common_routines.js 中的函数。