Блог

Я пытаюсь включить 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') 
  

Т.е. я пытаюсь смонтировать тег riot kaljasakot в шаблоне Pug. Однако браузер выдает ошибку 404 в консоли при рендеринге страницы:

ПОЛУЧИТЬ http://localhost:3001/kaljasakot.tag 404 (Не найден) riot compiler.min.js: 2

Я немного озадачен тем, где должен находиться файл тега, чтобы компилятор мог его найти, и я не могу найти никаких советов по этому поводу в Google. Кто-нибудь сталкивался с этим случаем?

Весь проект можно найти здесь, ссылка на Github, если это необходимо.

Файлы тегов извлекаются не при компиляции шаблона Pug, а из браузера при запуске приложения. В настоящее время вы не указали Express, где найти файлы тегов.

Чтобы исправить эту проблему, вы можете, например, создать папку public/tags , переместить туда файлы тегов и использовать их как script(type="riot/tag" src="tags/kaljasakot.tag") . Express найдет файлы оттуда, потому что вы настроили public папку как источник для статических файлов.

Теперь запрос больше не будет выдавать 404, но файл тегов также не будет работать. Поскольку вы используете Pug в файлах тегов, вам необходимо предварительно скомпилировать их, прежде чем приложение сможет их использовать. Если вы просто отбросите kaljasakot.тег для общей папки как было предложено выше, вы увидите ошибку Uncaught SyntaxError: Unexpected token = , потому что Riot не понимает синтаксис Pug.

Поэтому вы, вероятно, захотите просто сохранить файлы тегов в views папке в конце концов и настроить этап сборки, на котором вы компилируете теги и перемещаете их в public/tags папку. См. Документацию Riot по компиляции сервера и gulp-riot, например.