I’ve discovered a simple method to incorporate the plugin code found within the babel-plugin-transform-html-import-to-string transform library.
First Step
Add Babel to your document.
Second Step
I proceeded to modify the code by eliminating the file libraries and substituting a string value for the code, specifically HTML. This particular code can be obtained from this library.
function endsWith(str, search) {
return str.indexOf(search, str.length - search.length) !== -1;
}
// Convert `import template from 'file.html';` to a variable `var template = '<div></div>'`;
function babelPluginImportHtmlToString(o) {
var t = o.types;
return {
visitor: {
ImportDeclaration: {
exit: function (path, state) {
const node = path.node;
if (endsWith(node.source.value, '.html')) {
const html = require(node.source.value);
path.replaceWith(t.variableDeclaration("var", [
t.variableDeclarator(
t.identifier(node.specifiers[0].local.name),
t.stringLiteral(html))]));
}
}
}
}
};
}
Third Step
Next, I registered the function as a Babel plugin and initiated the transformation process utilizing the plugin.
var plugins = [];
plugins.push('babelPluginImportHtmlToString');
babel.registerPlugin('babelPluginImportHtmlToString', babelPluginImportHtmlToString);
// NOTE: Babel import statement not included in example
var code = babel.transform(code, {
filename: filename,
plugins: plugins,
presets: presets
}).code;
Example Scenario
Included support for this in the Sencha Fiddle found here. You can view the example at: . If you inspect the devtools, it will be evident in require.js.