Можно ли создать пакет с Rollup, который внедряет HTML из шаблона? - PullRequest
0 голосов
/ 14 апреля 2020

Я пытаюсь построить пакет IIFE ( немедленно вызванное выражение функции ), используя Rollup.

Я хотел бы собрать все вместе, мой JS, CSS, а затем некоторые HTML, от которых зависит Javascript. Проверьте это изображение, чтобы получить представление:

enter image description here

Есть ли способ сказать Rollup, что мой ввод (точка входа) seguro-vida-hipoteca.js, и пусть этот файл импортирует мои S CSS и HTML, поэтому он будет автоматически вставлен, когда кто-нибудь использует мою библиотеку?

Это будет, в результате CSS в голове и HTML к некоторому div, который я ожидал бы существовать в dom или просто в конце тела.

1 Ответ

0 голосов
/ 16 апреля 2020

Есть ли способ сообщить Rollup, что мой ввод (точка входа) is seguro-vida-hipoteca.js?

Конечно, для этого input опция .

Инъекция Sass в head легко осуществляется с помощью плагинов, таких как 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 это то, что вы обычно делаете в своем коде, а не через плагин, хотя вы можете воспользоваться Rollup для загрузки template.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 . Подробнее здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...