Javascript 如何将HTML文件作为模板导入汇总并编译为串联字符串

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

我已经在尝试了一些模板插件，但不想在每个实验中添加另一个模块库作为依赖项。我能够使用几个插件将HTML作为模板文本导入，但由于某些原因，它们并没有被babel编译成ES5兼容的字符串。Babel似乎只将内联（而不是导入的）模板文本编译为串联字符串。其他所有内容都正确编译为ES5。不确定为什么不包括外部HTML字符串。也许我的问题是巴别塔配置

我们在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

hello${data.entity}

index.js是用现代ES版本编写的

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

从“/template.html”导入模板；
log（模板（{entity=“world”}））；//日志：你好，世界

我希望编译的结果是与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>

var模板=函数（数据）{
返回“hello”+data.entity+“”；
}
log（模板（{entity=“world”}））；//日志：你好，世界

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

我在翻阅地图时发现了这一点

---

如果您只想将

.html

文件作为字符串导入，则还可以尝试使用：

---

我想你需要评估一下template@DerekPollard如果你的意思是用eval（）包装它，我宁愿找到一种不同的方式，除了解析HTML之外manually@DerekPollard你能详细说明一下如何使用eval吗？是的，这很完美<代码>汇总插件html。。。效果很好。

babel({
    exclude: 'node_modules/**',
    presets: ['@babel/preset-env'],
    extensions: ['.js', '.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",
  },
};