search

ThisNameWasTaken / ejs-plain-loader

MIT License
3 stars 1 forks source link

readme

ejs-plain-loader

npm License: MIT Build Status dependency Status devDependency Status

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

Instalation

npm i -D ejs-plain-loader

EJS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <%= include('partials/head.ejs') %>
</head>
<body>
    <%= include('partials/navbar.ejs') %>

    <main>
        <!-- ... -->
    </main>

    <%= include('partials/footer.ejs') %>
</body>
</html>

Usage

NOTE: You need to chain the ejs-plain-loader with an html loader such as the html-loader and use a template plugin such as the html-webpack-plugin. To install these run npm i -D html-loader html-webpack-plugin.

Inside your webpack config file add the fallowing rules

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

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.ejs$/i,
            use: [{
                loader: 'html-loader', // loader for html files goes here
                options: {
                    attrs: [':src', ':data-src', 'source:srcset', 'source:data-srcset'], // load(require) images, videos or other resources
                    interpolate: true
                }
            }, {
                loader: 'ejs-plain-loader'
            }]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({ // plugin for templates goes here
            template: './src/views/index.ejs'
        })
    ]
    // ...
}

Importing partials

    <!-- plain import -->
    <%- include('partials/my-awesome-partial.ejs') %>

    <!-- appending data -->
    <%- include('partials/card.ejs', {
            title: 'Lorem ipsum',
            content: 'Lorem ipsum dolor sit amet',
            actions: ['read more', 'add to favorites']
    }) %>

Example:

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/header.ejs', {
            title: 'Webpack Starter App',
            author: 'John Doe',
            keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'],
            description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.'
    }) %>
</head>
<body>
    <%- include('partials/navbar.ejs') %>

    <main>
        <!-- MAIN CONTENT -->
    </main>

    <%- include('partials/footer.ejs') %>
</body>
</html>

header.ejs

    <%
        if (typeof description === 'undefined')  description = 'placeholder';
        if (typeof keywords === 'undefined') keywords = ['placeholder'];
        if (typeof author === 'undefined') author = 'placeholder';
        if (typeof title === 'undefined') title = 'placeholder';
    %>

    <meta charset="UTF-8">
    <meta name="description" content="<%= description %>">
    <meta name="keywords" content="<%= keywords.join(',') %>">
    <meta name="author" content="<%= author %>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>

Note: When you import a file using the import partials/navbar syntax you have to use this syntax across all of the files you are including in navbar.ejs.

Example:

index.ejs

<!DOCTYPE html>
<html lang="en">
    ...
    <body>
    ...
    <%- include partials/navbar %>
    ...
    </body>
</html>

navbar.ejs

<!DOCTYPE html>
<html lang="en">
    ...
    <body>
    ...
    <%- include('partials/navbar.ejs') %>   <!-- Throws an error -->
    <%- include partials/navbar %>          <!-- Works fine -->
    ...
    </body>
</html>

Importing JavaScript or JSON files

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <%- 
        const meta = require('../data/index-meta.js');
        include('partials/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() {
        // ...
    }
}

Tags

See tags

Options

See EJS options

More info

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