Skip to content

Latest commit

 

History

History
203 lines (154 loc) · 5.49 KB

README-ja.md

File metadata and controls

203 lines (154 loc) · 5.49 KB

template-ejs-loader

npm License: MIT

EJS (Embeded JavaScript) loader for Webpack. It converts EJS templates to plain HTML using the EJS npm package.

Features

  • webpack5対応
  • requireを使って、.js,.json,node modulesをインポート
  • 全てのファイルに値を渡せる

Instalation

npm i -D template-ejs-loader

Usage

NOTE: template-ejs-loader を html-loader のような html ローダーと連鎖させ、html-webpack-plugin のようなテンプレートプラグインを使用する必要があります。これらをインストールするには、npm i -D html-loader html-webpack-pluginを実行してください。

webpack config fileに以下のルールを追加します。

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.ejs$/i,
        use: ['html-loader', 'template-ejs-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/ejs/index.ejs',
    }),
  ],
  // ...
}

Options

ejs でサポートされている値を設定できます。 値についてはこちらを参照ください。

以下は、独自の設定オプションになります

Name Type Default Description
data {Object} {}

data

Type: Object Default: {}

全ての ejs ファイルに同一の値を渡したい時に使用します。 個別に値を渡したい時はこちらを参照ください。

Importing partials

<!-- plain import -->
<%- include('components/footer.ejs') %>

<!-- appending data -->
<%- include('components/header.ejs', { title: 'TOP' }) %>

Example:

index.ejs

<%- include('/components/header.ejs', { title: 'TOP' }) %>

<%- include('/components/footer.ejs') %>

header.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>

  <body>

footer.ejs

</body>
</html>

Note: ejs v3.0+では、Include preprocessor directives (<% include user/show %>) はサポートされていません。

Importing JavaScript or JSON files

index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <% const meta = require('../data/index-meta.js') %>
    <%- include('components/header.ejs', meta) %>
  </head>
  <!-- ... -->
</html>

index-meta.js

module.exports = {
  title: 'Webpack Starter App',
  author: 'John Doe',
  keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'],
  description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
  customFunction: function () {
    // ...
  },
}

Importing node modules

index.ejs

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->

  <div>
    <% const _ = require('lodash') %>
    <%= _.join(['a','b','c'], '~') %>
  </div>

  <!-- ... -->
</html>

Passing individual values

もし、すべての htmlWebpackPlugin インスタンスがループ内で生成され、各 .ejs テンプレートに変数として渡す値を個別に取得したい場合、次の方法を試してみてください。(この方法は、webapck loader inline mechanic を使用して、すべての ejs ファイルを読み込む代わりに、各 .ejs ファイルに対して html-loader/template-ejs-Loader オプションを設定します)。

webpack.config.js

const { htmlWebpackPluginTemplateCustomizer }  = require('template-ejs-loader')
...
module.exports = {
  ...

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: htmlWebpackPluginTemplateCustomizer({
        htmlLoaderOption:{
          ... // html-loaderのオプションを設定します。
        },
        templateEjsLoaderOption:{
          root:'' // template-ejs-loaderのオプションを設定します。
          data:{
            foo:'test' // .ejsファイルごとに独立したデータインジェクションを行うことも可能です。
          }
        },
        templatePath:'./src/index.ejs' // ejs template path 
      }),
    }),
  ]

  ...
}

More info

For more info on how to use EJS visit their npm package page or their official website