html - 是否可以使用 Rollup 创建一个从模板注入 HTML 的包？

我正在尝试使用Rollup.

我想将我的 JS、CSS 和一些 Javascript 所依赖的 HTML 捆绑在一起。检查此图像以获得一个想法：

有没有办法告诉Rollup我的输入（入口点）是seguro-vida-hipoteca.js，并让这个文件导入我的 SCSS 和 HTML，以便在有人使用我的库时自动注入？

那将是头部中的结果 CSS，以及div我希望存在于 dom 中或仅在 body 末尾的一些 HTML。

标签： htmlcsstemplatesrolluprollupjs

有没有办法告诉 Rollup 我的输入（入口点）is seguro-vida-hipoteca.js？

当然，这就是input选项的用途。

head使用以下插件可以轻松地在其中注入 Sass rollup-plugin-postcss：

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  // ...
  plugins: [
    postcss(),
  ],
}

import './style.scss'; // Now each stylesheet you import will
                       // be injected to <head>

关于注入/附加 html，这是您通常在代码中而不是通过插件执行的操作，尽管您可以利用 Rolluptemplate.html作为字符串加载（例如通过使用rollup-plugin-html）：

import html from "rollup-plugin-html";

export default {
  // ...
  plugins: [
    html({
      include: "**/*.html",
    }),
  ],
}

import template from './template.html';

document.querySelector('#mydiv').innerHTML = template;

这似乎是WebComponents的一个很好的用例。更多信息在这里。