template-string-optimize-loader

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>';
};