@lyrion

Как использовать зависимость при рендере станицы handlebars?

Добрый день, только недавно начал знакомиться с бекэндом, так что не кидайте тапками)

Использую связку Express + Handlebars. Есть некая страница, которую я, для отображения, соответственно рендерю. На этой странице есть свой script, в котором я бы хотел использовать одну из зависимостей, объявленных в index.js.

Сейчас это выглядит так и оно не работает:
index.js
const express   = require('express');
const hbs       = require('express-handlebars');
const anime = require('animejs');
....
app.engine('hbs', hbs({
    defaultLayout: 'main',
    extname: 'hbs',
    layoutsDir: path.join(__dirname,'views/layouts')
}));

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

app.get('/', (req,res) => {
    res.render('loginform',{
        csspath: path.join(__dirname, 'styles', 'styles.css'),
    })
});

loginform.hbs
<body>
   бла-бла, какой-то html
   <script>
      let current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: 0,
                duration: 700,
                easing: 'easeOutQuart'
            })
   </script>
</body>

Соответственно мне пишет ошибку "anime is not defined".
Я конечно могу указать этот скрипт как модуль и подключить конкретно эту зависимость через import, но это явно не оптимально.
Подскажите пожалуйста какой метод использовать или хотя бы в какую сторону копать.
Заранее спасибо ;-)
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
syxme
@syxme
Дело в том что вы пытаетесь связать функции серверной части с фронтом.
const anime = require('animejs') будет доступен только в вашей программе (index.js)
Вам нужно сделать примерно так:
Для начала указать папку с статическими ресурсами
app.use(express.static('public'));
Переместить в папку public ваш скрипт animejs.js
Добавить в loginform.hbs
<head>
<script src="/animejs.js" ></script>
</head>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы