Question

我找不到将外部.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文件，我将逻辑和数据放在＆lt; %%＆gt;中标签，但这显然是一个补丁而不是一个可行的解决方案，因为ejs不是一个js文件。此外，它不起作用。

我在互联网上找不到任何解决方案。任何提示？

由于

Answer 1

你不能。

注意：您只能将.ejs文件中的数据传递给.js文件，而不能传递给其他方式。它不起作用，因为.js在服务器端呈现，而.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开始执行之前呈现在服务器上（它将在浏览器上启动），因此无法回到服务器并要求在页面上发送一些已经发送到浏览器。

Answer 2

Express的解决方法：

myScripts.js

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

然后在您的app.js中

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

res.render('template', {
  utils: myScripts
}

然后在您的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头部

    <!-- 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">
            <% } %>
        <% } %>
    <% } %>

通常，最好的做法是在关闭body标记时包含脚本，这样它们就不会阻塞页面渲染，因此请在ejs文件中的关闭body标记之前

<!-- 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>
<% } %>

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

3 个答案: