javascript - How to import HTML files as templates into Rollup and compile to concatenated strings - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm creating a build process for Optimizely experiments using Rollup. We were currently using Webpack but that exports bloated code for this use case. I want to be able to import .html files as templates and pile them to ES5 patible concatenated strings in my Rollup/Babel build.

I've already tried some of the template plugins at but don't want to add another module library as a dependency to each experiment. I was able to get HTML imported as a template literal using a couple of the plugins but for some reason they don't pile to an ES5 patible string by babel. Babel seems to only pile inline (not imported) template literals to concatenated strings. Everything else piles to ES5 correctly. Not sure why external HTML strings are not included. Maybe my problem is a babel config?

The method we've been using with our Webpack build uses html-es6-template-loader which has built in pilation so it can generate ES5 patible string concatenation out of the box. Something similar might be ideal.

This is my current configuration. Using posthtml here but I've tried multiple plugins with the same result.

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']
        })
    ]
}

Ideal scenario starting with an HTML file as a template with es6 ${} syntax, importing into a JS file, and piling to a JS file with inline concatenated string.

template.html

<div class="some-div">hello ${data.entity}</div>

index.js written in modern ES version

import template from './template.html';
console.log(template({entity="world"})); // logs: <div class="some-div">hello world</div>

I expect the result to be piled script patible with ES5 without the need for extra code for templating. result would be similar to 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>

I'm creating a build process for Optimizely experiments using Rollup. We were currently using Webpack but that exports bloated code for this use case. I want to be able to import .html files as templates and pile them to ES5 patible concatenated strings in my Rollup/Babel build.

I've already tried some of the template plugins at https://github./rollup/awesome#templating but don't want to add another module library as a dependency to each experiment. I was able to get HTML imported as a template literal using a couple of the plugins but for some reason they don't pile to an ES5 patible string by babel. Babel seems to only pile inline (not imported) template literals to concatenated strings. Everything else piles to ES5 correctly. Not sure why external HTML strings are not included. Maybe my problem is a babel config?

The method we've been using with our Webpack build uses html-es6-template-loader which has built in pilation so it can generate ES5 patible string concatenation out of the box. Something similar might be ideal.

This is my current configuration. Using posthtml here but I've tried multiple plugins with the same result.

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']
        })
    ]
}

Ideal scenario starting with an HTML file as a template with es6 ${} syntax, importing into a JS file, and piling to a JS file with inline concatenated string.

template.html

<div class="some-div">hello ${data.entity}</div>

index.js written in modern ES version

import template from './template.html';
console.log(template({entity="world"})); // logs: <div class="some-div">hello world</div>

I expect the result to be piled script patible with ES5 without the need for extra code for templating. result would be similar to 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>

• javascript
• rollup
• template-literals

Share Improve this question Follow asked May 20, 2019 at 16:27 chrisfwdchrisfwd 10111 silver badge77 bronze badges 4

• I think you'd need to eval the template – Derek Pollard Commented May 20, 2019 at 16:30
• @DerekPollard if you mean wrapping it in eval() I'd rather find a different way – chrisfwd Commented May 21, 2019 at 12:29
• Well that would be the way, short of parsing the HTML manually – Derek Pollard Commented May 21, 2019 at 14:33
• @DerekPollard can you elaborate on how you'd use eval? – chrisfwd Commented May 21, 2019 at 22:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you just want to import .html files as strings then you could also try using the rollup-plugin-html:

// rollup.config.js
import html from "rollup-plugin-html";

export default {
  input: "./index.js",
  plugins: [
    html({
      include: "**/*.html",
    }),
  ],
  output: {
    file: "my-module.js",
    name: "MyModule",
    format: "umd",
  },
};

I figured out the solution. I just needed to add HTML to the babel config. I didnt think that was needed before since I thought babel just parsed the JS file after the HTML got imported and converted to a template literal but I guess it is needed.

I figured this out while looking through the docs on external dependencies for rollup-plugin-babel

babel({
    exclude: 'node_modules/**',
    presets: ['@babel/preset-env'],
    extensions: ['.js', '.html']
})

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58

File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)