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

Question

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

这是翡翠视图：

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

这是来自渲染视图的路由文件的调用的 sn-p，其中触发了 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 调试器控制台窗口窗格中看到的错误。请注意，它将文件引用显示为 /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 视图正上方的目录中，那么这个外部文件引用是否由于某种原因无效？：

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

Answer 1

您只能在前端引用 public 文件夹中的静态文件（如果您已将静态资产设置为从该文件夹提供，就像您所做的那样）。您可以将 common_routines.js 文件放在公共文件夹中，例如public/js/。 现在，您可以使用script(src="/js/common_routines.js")在您的视图文件中引用它

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

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 的函数。