web-dev-qa-db-ja.com

外部の.jsファイルをejsに含める方法Nodeテンプレートページ

外部の.jsファイルをNode ejsテンプレートに含める方法が見つかりません。ロジックとデータを外部の.jsファイルのオブジェクトに入れ、そのファイルをindex.ejsテンプレートに含めてプルしますそれからのデータ。

標準の方法<script src="sample.js"></script>を挿入してみましたが、機能しません

次に、ejs固有のキーワード<% include partials/sample.js %>を試しましたが、これはパーシャル（ejsコードスニペット）を追加する場合にのみ機能します。

実行可能server.jsで定義されている静的ディレクトリに.jsファイルを挿入しましたが、結果はありません。

しかし興味深いことに、たとえば、cssファイルをejsテンプレートの古典的な方法に含めることは問題なく機能します

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

回避策は、ロジックとデータを<%%>タグ内に配置する外部ejsファイルを含めることですが、ejsはjsファイルではないため、これは明らかにパッチであり、実行可能なソリューションではありません。その上、それは機能しません。

インターネットで解決策が見つかりません。ヒントはありますか？

ありがとう

node.jsejs
5
Dan

できません。

注：データを.ejsファイルから.jsファイルに渡すことはできますが、その逆はできません。 .jsはクライアント側で実行されているのに対し、.ejsはサーバー側でレンダリングされるため、機能しません。サーバー側で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の実行が開始される前にサーバー上でレンダリングされるため（ブラウザーで開始されます）、サーバーに戻って、既にブラウザーに送信されているページで以前の変更を要求する方法はありません。

3
Bharathvaj Ganesan

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

意図に反して使用していると思います。コントローラでは、そのように含めたい外部スクリプトとスタイルを定義できます。

      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 }));

最後に、特別なejsタグを使用してJSONデータをレンダリングするなど、テンプレートにJavaScriptを絶対に含める必要がある場合<％-％>

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