Jadeの代わりにExpressでHTMLを使用する


103

Node.JSでExpressを使用しているときにJadeを取り除く方法は?プレーンHTMLを使用したいだけです。他の記事では、最新バージョンでは非推奨となったapp.register()が推奨されていることを確認しました。

回答:


78

あなたはこの方法でそれを行うことができます:

  1. ejsをインストールします。

    npm install ejs
  2. app.jsのテンプレートエンジンをejsとして設定します

    // app.js
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
  3. これで、ルートファイルでテンプレート変数を割り当てることができます

    // ./routes/index.js
    exports.index = function(req, res){
    res.render('index', { title: 'ejs' });};
  4. 次に、/ viewsディレクトリにHTMLビューを作成できます。


2
node.jsを使い始めました。解決策は私には明確ではありません。私は小さなhtmlウェブサイトを持っています。nodemailerを使用してサイトからメールを送信するには、node.jsが必要です。必要なものをすべてインストールしました。ただし、expressを使用して私のウェブサイトを実行するには、app.jsファイルに何を入れるべきかを考えなければなりません
user2457956

4
変数titleをhtmlファイルに印刷するにはどうすればよいですか?
マスターヨーダ

3
@MasterYodaが尋ねたように、まだ変数を印刷する方法を誰かが疑問に思っている場合は、htmlで次のように印刷できます:<%= title%>
Lucas Meine

62

JadeはHTML入力も受け入れます。
純粋なhtmlの送信を開始するには、行末にドットを追加するだけです。
それでうまくいく場合は、次のことを試してください。

doctype html              
html. // THAT DOT
    <body>     
        <div>Hello, yes this is dog</div>
    </body>

PS-HTMLを閉じる必要はありません-これはJadeによって自動的に行われます。


7
Doctype 5は非推奨になりました。最初の行として「doctype html」を使用します。
シュノーケルゼブラ2015年


18

Express 3以降は簡単に使用できます response.sendFile

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});)

公式急行APIリファレンス

res.sendfile(path, [options], [fn]])

指定されたパスでファイルを転送します。

ファイル名の拡張子に基づいて、Content-Type応答ヘッダーフィールドを自動的にデフォルト設定します。コールバックfn(err)は、転送が完了したとき、またはエラーが発生したときに呼び出されます。

警告

res.sendFilehttpキャッシュヘッダーを介してクライアント側のキャッシュを提供しますが、サーバー側のファイルコンテンツはキャッシュしません。上記のコードは、リクエストごとにディスクにヒットします。


2
OPは、通常のHTML構文だけで、何らかのテンプレートを使用したいと考えています。 sendfileファイルからバイトを送信するだけなので、テンプレートを作成することはできません。さらに、sendfileリクエストが来るたびにディスクにアクセスすることになるので、このような使用はお勧めしません-大きなボトルネックです。トラフィックの多いページでは、実際にはメモリ内キャッシュを実行する必要があります。
josh3736

1
@ josh3736 OPの意図が正しい場合は、質問を改善する必要があります。要求ごとにディスクにアクセスすることは正しいので、この事実について警告するように答えを改善します。次の点について警告するように改善することを検討してください:カスタマイズされたエンジンを実装する場合、キャッチ機能も実装する必要があります(必要な場合)、Expressでは処理されません。
laconbass 2013

17

私の意見では、htmlファイルを読み取るためだけにejsと同じ大きさのものを使用することは、少なからず強引です。非常にシンプルなhtmlファイル用の独自のテンプレートエンジンを作成しただけです。ファイルは次のようになります。

var fs = require('fs');
module.exports = function(path, options, fn){
    var cacheLocation = path + ':html';
    if(typeof module.exports.cache[cacheLocation] === "string"){
        return fn(null, module.exports.cache[cacheLocation]);
    }
    fs.readFile(path, 'utf8', function(err, data){
        if(err) { return fn(err); }
        return fn(null, module.exports.cache[cacheLocation] = data);
    });
}
module.exports.cache = {};

私はhtmlEngineを呼び出しました。使用方法は次のように指定するだけです。

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');

11

app.register()app.engine()Express 3 では、テンプレートエンジンの処理方法が変更されたため、現在は廃止されていません。

Express 2.xテンプレートエンジンの互換性には、次のモジュールのエクスポートが必要です。

exports.compile = function(templateString, options) {
    return a Function;
};

Express 3.xテンプレートエンジンは、次のものをエクスポートする必要があります。

exports.__express = function(filename, options, callback) {
  callback(err, string);
};

テンプレートエンジンがこのメソッドを公開しない場合でも、あなたは運が悪いわけではありません。このapp.engine()メソッドを使用すると、任意の関数を拡張機能にマップできます。マークダウンライブラリがあり、.mdファイルをレンダリングしたいが、このライブラリがExpressをサポートしていないapp.engine()場合、呼び出しは次のようになります。

var markdown = require('some-markdown-library');
var fs = require('fs');

app.engine('md', function(path, options, fn){
  fs.readFile(path, 'utf8', function(err, str){
    if (err) return fn(err);
    str = markdown.parse(str).toString();
    fn(null, str);
  });
});

「プレーン」なHTMLを使用できるテンプレートエンジンを探している場合は、非常に高速であるためdoTをお勧めします。

もちろん、Express 3のビューモデルでは、ビューのキャッシュはユーザー(またはテンプレートエンジン)に任されていることに注意してください。本番環境では、ビューをメモリにキャッシュして、リクエストごとにディスクI / Oを実行しないようにする必要があります。


私の答えを見てください、あなたはテンプレートエンジンを登録する方法を完全に説明していますが、プレーンHTMLファイルを転送するはるかに簡単な方法があります。
laconbass 2013

@ josh3736:「非常に高速な」ハイパーリンクはFirefox 41では機能しますが、Chromiumバージョン45.0.2454.101 Ubuntu 14.04(64ビット)ではテストを実行できません。なんでかしら。
ロニーベスト


4

レンダーエンジンがヒスイではなくhtmlを受け入れるようにするには、次の手順に従います。

  1. あなたのディレクトリにconsolidateswigをインストールしてください。

     npm install consolidate
     npm install swig
  2. 次の行をapp.jsファイルに追加します

    var cons = require('consolidate');
    
    // view engine setup
    app.engine('html', cons.swig)
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', html');
  3. 「views」フォルダ内に.htmlとしてビューテンプレートを追加します。ノードサーバーを再起動し、ブラウザーでアプリを起動します。

これは問題なくhtmlをレンダリングしますが、JADEを学習して使用することをお勧めします。Jadeは素晴らしいテンプレートエンジンであり、これを学ぶことで、デザインとスケーラビリティを向上させることができます。


1
ジェイドの唯一の大きな問題は、インデントです。間違えた場合、コードはコンパイルされません。また、ジェードが行うのはコードを縮小することだけであるという事実以外に、なぜジェードなのか...
zapper

4

最初に以下の行を使用して、テンプレートエンジンの互換性バージョンを確認します

express -h

次に、リストからビューを使用する必要があります。ビューを選択しない

express --no-view myapp

これで、パブリックフォルダー内のすべてのhtml、css、js、および画像を使用できます。


3

まあ、それはあなたが静的ファイルを提供したいようです。そして、そのためのページがあります http://expressjs.com/en/starter/static-files.html

誰もドキュメントにリンクしていない奇妙な。


「誰もドキュメントにリンクしていないという奇妙なこと」Expressで別のビュー言語を使用するのは簡単なことだと私は同意します。
pixel 67

1

ルートがすでに定義されているか、それを行う方法を知っていることを考慮してください。

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

注:*はすべてを受け入れるため、このルートは他のすべてのルートの後に配置する必要があります。


1

JadeはHTMLをサポートしているので、.html拡張子だけが必要な場合は、これを行うことができます

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

次に、ビューのファイルをjadeからhtmlに変更します。


HTMLマークアップの前に「ドット」またはピリオドを付ける必要はありませんか?
Gus Crawford


-10

jade ..などを使用せずにnodeJSでプレーンHTMLを使用する場合:

var html = '<div>'
    + 'hello'
  + '</div>';

Personnaly私はそれでうまくやっています。

制御時の利点はシンプルです。'<p>' + (name || '') + '</p>'、三項などのいくつかのトリックを使用できます。

ブラウザでインデントされたコードが必要な場合は、次のようにすることができます。

+ 'ok \
  my friend \
  sldkfjlsdkjf';

\ tまたは\ nを自由に使用できます。しかし、私はなしが好きです、そしてそれはより速いです。


Express(vsプレーンNode.JS)でHTMLファイルを使用できるようにしたい
Sanchit Gupta

ooooohh申し訳ありません(私はフランス人:p)fs。モジュールを使用できます。fs.readFile(htmlfile, 'utf8', function (err, file) {
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.