web-dev-qa-db-ja.com

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

Node.JSでExpressを使用しているときにJadeを削除するにはどうすればよいですか？プレーンHTMLを使用したいだけです。他の記事で、人々がapp.register（）を推奨しているのを見たことがありますが、これは最新バージョンでは非推奨になりました。

htmlnode.jsexpresspug
97
Sanchit Gupta

次の方法で実行できます。

  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ビューを作成できます。

73
Biwek

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

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

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

61
Martin Sookael

私の意見では、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');
16
kevin.groat

Express 3の時点では、単に response.sendFile を使用できます

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

公式のExpress APIリファレンス から：

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

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

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

警告

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

16
laconbass

app.register()は減価されていません。Express3 テンプレートエンジンの処理方法を変更する から名前がapp.engine()に変更されました。

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を実行しないように、おそらくビューをメモリにキャッシュする必要があります。

10
josh3736

レンダリングエンジンがヒスイの代わりにhtmlを受け入れるようにするには、次の手順に従います。

  1. consolidate および swig をディレクトリにインストールします。

     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は素晴らしいテンプレートエンジンであり、これを学習することで、設計とスケーラビリティを向上させることができます。

4
AnandShanbhag

EJSを使用して、どのテンプレートがHTMLであるが、変数をサポートするかを明示できます。以下は、エクスプレスでEJSを使用する方法に関する優れたチュートリアルです。

http://robdodson.me/blog/2012/05/31/how-to-use-ejs-in-express/

4
Pablo Vallejo

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

express -h

リストからビューを使用しないでください。ビューを選択しません

express --no-view myapp

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

3
Soubhagya Kumar

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

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

3
S Meaden

Htmlファイルをjadeファイルに直接含めることもできます

include ../../public/index.html

元の答え： 玉なしのエクスプレスジェネレーター

1
Priyanshu Chauhan

jadeはHTMLをサポートしているため、.html extのみが必要な場合は、これを行うことができます

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

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

1
Weijing Jay Lin

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

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

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

0
João Rodrigues