logo标签列表

将脚本src传递到Pug模板中

javascriptexpresspug
4

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

Original Answer翻译成："最初的回答"

views
    public
        index.jade
        main.js

index.js

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

index.js的内容：

（注：Original Answer翻译成“最初的回答”并不符合上下文语境，因此未进行翻译）

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}')

控制台出现了一个奇怪的错误。脚本的名称已经显示，但是我还是收到了错误提示：

未捕获的语法错误：意外的标记 <

当我查看控制台时，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不正确吗？谢谢。

翻译结果：

所以，这里只是将 Pug 转译成了压缩的 HTML。

有人能够解释一下吗？是我配置 Express 不正确吗？谢谢。

3个回答
4
在Jade模板中编写内联JavaScript时，需要在脚本标签后面加一个点。同时，您应该缩进您的代码。
例如，包含外部js文件如下：
script(type='text/javascript', src='/socket.io/socket.io.js')

Inline js like:

script(type='text/javascript').
1

太简单了！

include TOP.pug
head
  script(type='text/javascript').
    function ExampData() {
    var ws = new WebSocket("ws://"blah.com:6789");
    ws.onopen = function() { ws.send("hola); };
    ws.onmessage = function(e) {
    // code comments like this are OK.
    el.innerHTML = e.data + "<br>" + el.innerHTML;
    };
    ws.onclose = function() { console.log("ws closed ..."); };
    }
| Example:
br
pre#logtag
br
| (Recent items are at the top)

script(type='text/javascript').
  var el = document.getElementById("logtag");
  ExampData()
1
我不知道Jade，但你的Express设置很好。从渲染的HTML中可以看出，Express将正确的值传递到模板中，即“/main.js”。你还知道捆绑文件正在被提供，因为在“sources”下可以看到它。你看到的错误几乎肯定是你的转换/捆绑React代码的问题。请参见ReactJS：意外标记'<'以了解一些可能尝试的步骤。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接