これはなにかというと、既に存在するexample.jsonのファイルの中身をEJSテンプレートにインクルードしたいということなんですね。

具体的に


下記をEJSテンプレートだと思ってもらいたいんですが、EJSテンプレートのなかで、こういうことがしたい。

1
<script>
2
  const exampleJsonContent = <%- ここでexample.jsonの中身を取得して変数に放り込みたい %>
3
</script>

もちろん、AjaxでJSONを取得すればいいのではという話もあるんですけど、そうではなくてですね、テンプレートに埋め込みたいんですよ。テンプレートの<script>タグ内に埋めてしまいたい。

できないやりかた


私もこんなのEJS内でJSONをreadFileSyncすればいいだけだろう。なんて思いました。思ったので初めは次のようにやったのですが…

1
<%
2
  const fs = require('fs');
3
  const jsonContent = fs.readFileSync('./example.json'),
4
%>
5
6
<script>
7
  const exampleJsonContent = <%- jsonContent %>
8
</script>

これダメなんですね。どうもEJSテンプレート内でrequireできないようです。

webpackを使ってやる


少し前にhtml-webpack-pluginというのを使ってCSSをEJSにインクルードするということをしたので、それと同じ要領でできるかもしれないと思いました。

方法としてはhtml-webpack-pluginでJSONファイルの中身を含めたHTMLを生成し、それをEJSでインクルードするという流れになります。

ライブラリのインストール

必要なライブラリをインストールします。

1
$ npm install webpack webpack-cli html-webpack-plugin

HtmlWebpackPluginがインジェクトするテンプレートファイルを作成

HtmlWebpackPluginがインジェクトするためのテンプレートファイルを作成します。今回はexample.htmlとします。

1
<script>
2
  const exampleJsonContent = <%= htmlWebpackPlugin.options.jsonfileContent %>
3
</script>

HtmlWebpackPluginからJSONをうけとる変数がhtmlWebpackPlugin.options.jsonfileContentになります。

webpackの設定

HtmlWebpackPluginで生成されるHTMLはデフォルトで<head>...</head>が付与されてしまうので、デフォルトのインジェクトはOFFにしてjsonfileContentというのオプションを作成し、そこにexample.jsonの中身を読み取ったものを渡します。これはexample.html側で受け取るようなります。

ASSET_PATHとかは環境にあわせて設定してください。

1
const path = require('path');
2
const HtmlWebpackPlugin = require('html-webpack-plugin')
3
const fs = require('fs');
4
5
const ASSET_PATH = process.env.ASSET_PATH || '/dist';
6
const DATA_DIST_PATH = './dist';
7
8
module.exports = {
9
  entry: {
10
    main: path.join(__dirname, "./example.json"),
11
  },
12
  output: {
13
    path: path.resolve(path.join(DATA_DIST_PATH)),
14
    publicPath: ASSET_PATH,
15
  },
16
  plugins: [
17
    new HtmlWebpackPlugin({
18
      filename: 'example.html',
19
      template: path.join(__dirname, "./example.html"),
20
      jsonfileContent: fs.readFileSync('./example.json'),
21
      inject: false,
22
    }),
23
  ]
24
};

これを適当なファイル名で保存します。今回はwebpack.injectJson.config.jsとします。

実行

このwebpackを実行するnpm scriptを作って実行します。

1
"scripts": {
2
  "injectJson": "webpack --config webpack.injectJson.config.js --mode='production'"
3
}

するとexample.jsonの中身がインジェクトされたhtmlが生成されているはずです。後はそれをEJS側でインクルードすればよいだけです。