如何将 HTML 个文件作为模板导入 Rollup 并编译为连接字符串

Question

我正在为使用 Rollup 的 Optimizely 实验创建一个构建过程。我们目前正在使用 Webpack，但它会为这个用例导出臃肿的代码。我希望能够将 .html 文件作为模板导入，并在我的 Rollup/Babel 构建中将它们编译为 ES5 兼容的串联字符串。

我已经在 https://github.com/rollup/awesome#templating 上尝试了一些模板插件，但不想添加另一个模块库作为每个实验的依赖项。我能够使用几个插件将 HTML 作为模板文字导入，但由于某些原因，它们无法通过 babel 编译为 ES5 兼容字符串。 Babel 似乎只将内联（未导入）模板文字编译为连接字符串。其他一切都能正确编译为 ES5。不确定为什么不包括外部 HTML 字符串。也许我的问题是 babel 配置？

我们在 Webpack 构建中使用的方法使用 html-es6-template-loader，它内置了编译功能，因此它可以开箱即用地生成 ES5 兼容的字符串连接。类似的东西可能是理想的。

这是我当前的配置。在这里使用 posthtml 但我尝试了多个插件，结果相同。

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

理想场景以HTML文件为模板，使用es6 ${}语法，导入JS文件，编译为内联字符串的JS文件。

template.html

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

index.js用现代ES版本编写

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

我希望结果是与 ES5 兼容的编译脚本，而不需要额外的模板代码。结果类似于下面的代码。

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>

Answer 1

我想出了解决办法。我只需要将 HTML 添加到 babel 配置中。我之前不认为这是必需的，因为我认为 babel 在 HTML 被导入并转换为模板文字后才解析 JS 文件，但我想它是必需的。

我在浏览 docs on external dependencies for rollup-plugin-babel

时发现了这一点

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

Answer 2

如果您只想将 .html 文件作为字符串导入，那么您也可以尝试使用 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",
  },
};

如何将 HTML 个文件作为模板导入 Rollup 并编译为连接字符串

How to import HTML files as templates into Rollup and compile to concatenated strings

javascript

rollup

template-literals