WEBサーバで、SSI(Server Side Include)というのを使えるようにすると
この書式で、外部データをHTMLの一部として読み込めます。
<!--#include virtual="ssi/header.html" -->
npmパッケージでおなじみのbrowserSyncでSSIを使うときは、browsersync-ssi
という、browserSyncのmoduleで拡張機能としてSSIを実現する追加パッケージが有名です。
…が、設定してみると/
はじまりのアドレスの際、表示させたいファイルを指定する serverのindexが効かなくなったので
moduleではなくrewriteRulesでSSIを再現してみました。
browserSyncのinitで設定
const browserSync = require('browser-sync'); const fs = require('fs'); const dest = `htdocs`; browserSync.init({ port: 8080, weinre: { port: 9090, }, ui: false, open: 'external', notify: false, server: { baseDir: `${dest}`, index: [`_index.html`, `index.html`], }, rewriteRules: [ { match: /<!--#include virtual="(.+)" -->/g, fn: (req, res, match, filename) => fs.statSync(`${dest}${filename}`) ? fs.readFileSync(`${dest}${filename}`, 'utf-8') : '', }, ], });
ファイル操作ライブラリのmpmパッケージ、fs
も使うので
requireで読み込んでおきます。
処理は、rewriteRulesのmatch
でHTML内に埋まっているincludeの書式を探し出し
読み込みたい外部ファイルの存在を確認できたら、内容を取得して表示させる流れになっています。
fs.statSync
… ファイルを確認fs.readFileSync
… 内容を取得