Как включить внешний файл.js на страницу шаблона ejs Node

Я не могу найти способ включить внешний файл.js в шаблон Node ejs. Я хочу поместить логику и данные в объект во внешнем файле.js, включить этот файл в шаблон index.ejs и извлечь данные из него.

Я пробовал вставляя стандартным способом<script src="sample.js"></script>и это не работает

Тогда я попробовал ejs конкретное ключевое слово <% include partials/sample.js %> и это работает только для добавления партиалов (фрагментов кода ejs).

Я вставил файл.js в статическую директорию, которая определена в исполняемом файле server.js, результатов снова нет.

Но интересно, что, например, включение css файла в шаблон ejs классическим способом работает нормально

<link href="/assets/styles.css" rel="stylesheet" type="text/css" />

В качестве обходного пути можно было бы включить внешний файл ejs, в который я бы поместил логику и данные в теги <%%>, но это, очевидно, исправление, а не жизнеспособное решение, поскольку ejs не является файлом js. Кроме того, это не работает.

Я не могу найти никакого решения в Интернете. Любой намек?

Спасибо

Источник

5 ответов

Решение

Ты не можешь

Примечание. Вы можете передавать данные только из файла.ejs в файл.js, но не иначе. Это не будет работать, потому что.ejs отображается на стороне сервера, а.js работает на стороне клиента. Я предполагаю, что вы используете EJS на стороне сервера

1) Вы можете передать значение переменной ejs в переменную Javascript

    <% var test = 101; %> // variable created by ejs
    <script>
       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers
       console.log(getTest);  // successfully prints 101 on browser
    </script>

2) Вы не можете передать значение переменной js в переменную ejs

Да, вы не можете: если это на сервере.

Зачем:

Шаблон EJS будет отображаться на сервере до начала выполнения js (он запустится в браузере), поэтому невозможно вернуться на сервер и запросить некоторые предыдущие изменения на странице, которая уже отправлена ​​в браузер.

Источник

Обходной путь с Express:

myScripts.js

module.export = {
    foo() {},
    bar() {}
}

Затем в вашем app.js

var myScripts = require('/path/to/myScripts');

res.render('template', {
    utils: myScripts
}); // you forgot a ')' here

затем в вашем template.ejs

// utils will act in global scope for this file
<%
  utils.foo();
  utils.bar();
%>
Источник

Я смог сделать это:

  1. обслуживание папки/файла Js в файле записи приложения node следующим образом:
      app.use(express.static(path.join(__dirname, 'views/js')));

  1. Добавлены функции DOM в файле index.js, который находится в папке views/js.

  2. Добавлен тег script, который ссылается на файл index.js перед конечным тегом body файла index.ejs, например:

      <script scr="index.js" type="text/javascript"></script>

Обратите внимание, что src в теге script не имеет"./js/index.js". На самом деле я не знаю, почему это так работает (то же самое с внешней таблицей стилей CSS).

Источник

Я считаю, что вы используете это вопреки намерениям. В контроллере вы можете определить внешние скрипты и стили, которые хотите включить, вот так

      res.render('page-one', {
        title: 'Page One',
        data: pageData,
        libs: ['page-one', 'utils'],
        styles: ['page-one']
      });

В ваших статических активах для вашего приложения есть папка js и папка css

            |- static/
               |- css/
               |- fonts/
               |- img/
               |- js/
               favicon.ico
            |- templates/

В папке js вы помещаете файлы page-one.js и utils.js В папку css помещаете файл page-one.css

В разделе заголовка вашего HTML в шаблоне ejs

    <!-- styles included on all pages -->
    <link rel="stylesheet" href="/css/bootstrap.css">
    <!-- styles specific to individual pages -->
    <% if (typeof styles !== 'undefined') { %>
        <% if (styles.length > 0) { %>
            <% for (let style of styles) { %>
                <link rel="stylesheet" href="/css/<%= style %>.css">
            <% } %>
        <% } %>
    <% } %>

Обычно рекомендуется включать скрипты в закрывающий тег тела, чтобы они не блокировали рендеринг страницы, поэтому перед закрывающим тегом тела в вашем файле ejs

<!-- scripts included on all pages -->
<script src='/js/libs/jquery.min.js' type='text/javascript'></script>

<!-- page specific scripts -->
<% if (typeof libs !== 'undefined') { %>
    <% for (let lib of libs) { %>
        <script src='/js/<%= lib %>.js' type='text/javascript'></script>
    <% } %>
<% } %>
</body>

Когда ваша страница визуализируется, она будет отображать скрипт, и CSS автоматически включает блок if на случай, если вы не определяете какие-либо включения в контроллере. В своем приложении Express вы определяете свои статические и внешние скрипты, например, такие. Помните, что выше мы создали папки js и css внутри каталога с именем static.

// Define static assets
app.use(express.static('static'));
// included on all pages
app.use('/js/libs', express.static(path.join(process.cwd(), 'node_modules/jquery/dist'), { maxAge: 31557600000 }));

Наконец, если вам абсолютно необходимо включить JavaScript в свой шаблон, например, рендеринг данных JSON и т. Д., Используя специальный тег ejs <% -%>

<% if (jsonData) { %>
<script id="jsonData">var jsonData=<%- JSON.stringify(jsonData) %>;</script>
<% } %>
Источник

Вы можете добиться этого, добавив код ниже:app.use(express.static(path.join(__dirname,public)));

Вы должны добавить каталог с именем public (или как вы его называете) в папку вашего проекта. В эту папку вы можете добавить свой внешний файл JS.

NB: выражениеpath.joinиспользуется, чтобы сделать каталог общедоступным/доступным, когда вы вызываете/инициируете приложение из-за пределов папки проекта.

Источник
Другие вопросы по тегам