Question

我试图将riot.js标记包含到我的项目中，以便我可以重用组件。该应用程序在Node + Express上运行，并使用Pug进行模板化。

我有呈现以下页面的路径：

include includes/header.pug 
link(rel="stylesheet" href="/styles/kaljasakot.css" type="text/css") 
body(id='bootstrap-override') 
    div(class='container-fluid') 
     div(class='header') 
      img(class='okklogo' src='img/okkimg.jpeg' height='80' width='130') 
      h1 Kaljasakot 
    kaljasakot 
    script(type="riot/tag" src="kaljasakot.tag") 
    script(src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js") 
    script riot.mount('kaljasakot') 
    include includes/footer.pug 
    script(src='/js/kaljasakot.js') 

即我正试图在帕格模板上安装防暴标签kaljasakot。然而，浏览器提供了一个404错误页面上的控制台渲染：

GET http://localhost:3001/kaljasakot.tag 404（未找到） 防暴+ compiler.min.js：2

我有点难倒标记文件应该放在哪里以便编译器找到它，而且我无法从Google中找到任何提示。有没有人遇到过这种情况？

如果需要，整个项目可以在这里找到Github link。

Answer 1

标记文件在编译帕格模板时不会被抓取，而是在应用程序运行时从浏览器中获取。 目前您还没有告诉Express在哪里可以找到标签文件。

要解决此问题，可以例如创建一个文件夹public/tags，将标记文件移动到那里并使用它们，如script(type="riot/tag" src="tags/kaljasakot.tag")。 Express会从那里找到文件，因为您已将public文件夹配置为静态文件的来源。

现在请求不会再给404了，但标签文件也不会有效。 由于您在标记文件中使用了Pug，因此您需要在应用程序可以使用它们之前对它们进行预编译。如果您只是将kaljasakot.tag放到公共文件夹中，您会看到一个错误Uncaught SyntaxError: Unexpected token =，因为Riot不理解帕格语法。

因此，您可能只想将标记文件保存在views文件夹中，并设置构建步骤，在该步骤中编译标记并将它们移动到public/tags文件夹。例如，参见Riot's documentation on server compilation和gulp-riot。