Apakah mungkin membuat bundel dengan Rollup yang memasukkan HTML dari template?

Saya mencoba membuat bundel IIFE (ekspresi fungsi yang segera dipanggil) menggunakan Rollup.

Saya ingin menggabungkan semua JS, CSS, dan beberapa HTML yang menjadi sandaran Javascript saya. Periksa gambar ini untuk mendapatkan ide:

masukkan deskripsi gambar di sini

Apakah ada cara untuk memberi tahu Rollup bahwa masukan saya (titik masuk) adalah seguro-vida-hipoteca.js, dan meminta file ini mengimpor SCSS dan HTML saya sehingga akan dimasukkan secara otomatis ketika seseorang menggunakan perpustakaan saya?

Yaitu, CSS yang dihasilkan di kepala, dan HTML ke beberapa div yang saya harapkan ada di dom, atau hanya di akhir isi.


html css rollup rollupjs templates
person rmartrenado    schedule 14.04.2020    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Apakah ada cara untuk memberi tahu Rollup bahwa masukan saya (titik masuk) is seguro-vida-hipoteca.js?

Tentu, itulah gunanya input opsi.

Menyuntikkan Sass di head mudah dilakukan dengan plugin seperti 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>

Tentang menyuntikkan/menambahkan html, itu adalah sesuatu yang biasanya Anda lakukan dalam kode Anda dan bukan melalui plugin, meskipun Anda dapat memanfaatkan Rollup untuk memuat template.html sebagai string (misalnya dengan menggunakan 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;

Catatan tambahan

Tampaknya ini merupakan kasus penggunaan yang baik untuk WebComponents. Info lebih lanjut di sini.

person Umbo    schedule 16.04.2020
comment
Kedengarannya bagus.. Izinkan saya mencobanya akhir pekan ini dan saya akan memberi tahu Anda. - person rmartrenado; 17.04.2020