template-string-optimize-loader

template string optimize loader module for webpack

Installation

npm i template-string-optimize-loader -D

Usage

module: {
    rules: [
        {
            test: /\.js$/,
            use: [
                'template-string-optimize-loader',
                'babel-loader'
            ]
        }
    ]
}

Example

// ES6 template string HTML
const template = data => `
    <!-- section start -->
    <section>
        <h3>${data.title}</h3>
        <div>${data.date}</div>
        <dl>
            <dt>Coffee</dt>
            <dt>Black hot drink</dt>
            <dt>Milk</dt>
            <dd>
                <ul>
                    ${data.list.map((item) => `
                        <li>${item}</li>
                    `).join('')}
                </ul>
            </dd>
        </dl>
    </section>
    <!-- section end -->
`;

// source => babel
var template = function template(data) {
    return '\n    <!-- section start -->\n    <section>\n        <h3>' + data.title + '</h3>\n        <div>' + data.date + '</div>\n        <dl>\n            <dt>Coffee</dt>\n            <dt>Black hot drink</dt>\n            <dt>Milk</dt>\n            <dd>\n                <ul>\n                    ' + data.list.map(function (item) {
        return '\n                        <li>' + item + '</li>\n                    ';
    }).join('') + '\n                </ul>\n            </dd>\n        </dl>\n    </section>\n    <!-- section end -->\n';
};

// source => babel => template-string-optimize
var template = function template(data) {
    return '<section><h3>' + data.title + '</h3><div>' + data.date + '</div><dl><dt>Coffee</dt><dt>Black hot drink</dt><dt>Milk</dt><dd><ul>' + data.list.map(function (item) {
        return '<li>' + item + '</li>';
    }).join('') + '</ul></dd></dl></section>';
};