如何将外部 .js 文件包含到 ejs 节点模板页面

Question

我找不到将外部 .js 文件包含到 Node ejs 模板的方法。我想将逻辑和数据放入外部 .js 文件中的对象中，将该文件包含到 index.ejs 模板中并从中提取数据。

我尝试通过插入标准方式 <script src="sample.js"></script>，还是不行

然后我尝试了 ejs 特定关键字 <% include partials/sample.js %>，这仅适用于添加部分（ejs 代码 sn-ps）。

我将.js文件插入到可执行server.js中定义的静态目录中，再次没有结果。

但有趣的是，将 css 文件包含到 ejs 模板中的经典方式可以正常工作，例如

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

解决方法是包含外部 ejs 文件，我会将逻辑和数据放入 标记中，但这显然是一个补丁而不是可行的解决方案，因为 ejs 不是 js 文件。此外，它不起作用。

我在 Internet 上找不到任何解决方案。有什么提示吗？

谢谢

Answer 1

你不能。

注意：您只能将数据从 .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 变量

是的，您不能：如果它在服务器上。

为什么：

在 js 开始执行之前，EJS 模板将在服务器上呈现（它将在浏览器上启动），因此无法返回服务器并要求对已经发送到的页面进行一些先前的更改浏览器。

Answer 2

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();
%>

Answer 3

我相信您使用它的目的与本意相反。 在控制器中，您可以像这样定义要包含的外部脚本和样式

      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

在 ejs 模板中 html 的 head 部分

    <!-- 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 应用程序中，您可以定义静态和外部脚本，如下所示 记得上面我们在名为 static 的目录中创建了 js 和 css 文件夹

// 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，例如使用特殊的 ejs 标签呈现 JSON 数据等

<% if (jsonData) { %>
<script id="jsonData">var jsonData=<%- JSON.stringify(jsonData) %>;</script>
<% } %>