将脚本 src 传递给 Pug 模板答案

【问题标题】：Pass script src into Pug template将脚本 src 传递给 Pug 模板
【发布时间】：2019-11-15 16:20:14
【问题描述】：

我正在尝试让我的 Pug 模板使用 Express 呈现脚本。我的文件结构如下：

views
    public
        index.jade
        main.js

index.js

我尝试将脚本名称作为参数传递给res.render('public/index', { bundle: '/main.js' })，但没有成功。

我的index.js的内容：

const app = express();

app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, 'views/public')));

app.use('*', (req, res, next) => {
    res.render('public/index', { bundle: '/main.js' });
});

我的index.jade的内容：

doctype html
html
    head
        title SSR React
    body
        div#root
        script(src='#{bundle}')

我在控制台中遇到了一个奇怪的错误。脚本的名称正在通过，但我收到错误

Uncaught SyntaxError: Unexpected token

我看控制台时main.js的内容如下：

<!DOCTYPE html><html><head><title>SSR React</title></head><body><div id="root"></div><script src="/main.js"></script></body></html>

所以，只是从 Pug 转译的缩小版 HTML。

任何人都可以在这里阐明一下吗？我是否错误地配置了 Express？谢谢。

【问题讨论】：

标签： javascript express pug

【解决方案1】：

在 Jade 模板中编写内联 JavaScript 时，您需要在脚本标记后添加一个点。你也应该缩进你的代码。

例如包含外部 js，例如：

script(type='text/javascript', src='/socket.io/socket.io.js')

内联js之类的：

script(type='text/javascript').

【讨论】：

【解决方案2】：

我不认识 Jade，但您的 Express 设置很好。您可以从呈现的 HTML 中看到 Express 正在将正确的值传递给您的模板，即“/main.js”。您还知道捆绑文件正在被提供，因为您在 devtools 中的“sources”下看到它。您看到的错误几乎肯定是您的转译/捆绑的 React 代码存在问题。请参阅ReactJS: unexpected token '<' 了解您可以尝试的一些步骤。

【讨论】：