I am currently working on setting up a build process for Optimizely experiments using Rollup instead of Webpack. The reason for this change is that the code exported by Webpack is too bloated for our specific use case. My goal is to import .html files as templates and then compile them into concatenated strings that are compatible with ES5 in my Rollup/Babel build.
Although I have experimented with some template plugins listed on https://github.com/rollup/awesome#templating, I am hesitant to add another module library as a dependency for each experiment. While I have managed to import HTML files as template literals using a couple of plugins, they do not get compiled into ES5 compatible strings by Babel. It seems that Babel only compiles inline template literals to concatenated strings, and external HTML strings are left out. I suspect this might be a configuration issue with Babel.
In our current Webpack build process, we utilize the html-es6-template-loader which has built-in compilation capabilities to generate ES5 compatible string concatenation effortlessly. It would be great to find something similar for Rollup.
Here is my current configuration, using posthtml, although I have tried other plugins with the same outcome:
import babel from 'rollup-plugin-babel';
import posthtml from 'rollup-plugin-posthtml-template';
export default {
input: './src/index',
output: {
file: './dist/index.js',
format: 'cjs'
},
plugins: [
posthtml({
template: true
}),
babel({
exclude: 'node_modules/**',
presets: ['@babel/preset-env']
})
]
}
The ideal scenario would involve starting with an HTML file as a template with ES6 ${} syntax, importing it into a JS file, and then compiling it into a JS file with inline concatenated strings.
template.html:
<div class="some-div">hello ${data.entity}</div>
index.js in modern ES version:
import template from './template.html';
console.log(template({entity="world"})); // logs: <div class="some-div">hello world</div>
The desired outcome is to have the compiled script be compatible with ES5 without requiring additional templating code. The result should resemble something like the code below:
var template = function(data){
return '<div class="some-div">hello ' + data.entity + '</div>';
}
console.log(template({entity="world"})); // logs: <div class="some-div">hello world</div>