svelte render

@Metamodern/Svelte-Render

Alat build yang berfokus pada Jamstack yang ramah untuk aplikasi langsing

Saya membuat utilitas ini untuk membuat konfigurasi membangun untuk proyek langsing saya. Karena saya fokus pada situs statis modern dan aplikasi sisi klien yang dapat digunakan dengan Netlify, Sapper mencakup banyak infrastruktur untuk pengembangan sisi server yang tidak saya butuhkan. Svelte Kit sudah dekat sebagai pengganti generasi berikutnya untuk Sapper, tetapi mungkin tidak siap-produksi dalam waktu dekat, jadi saya akan mempertahankan alat CLI ini sampai saya memiliki penggantian yang solid.

Fitur

Berikut adalah beberapa fitur yang ditambahkan svelte-render di atas konfigurasi rollup starter:

• Mengasumsikan struktur direktori yang masuk akal, tetapi memungkinkan kustomisasi
• Termasuk skrip CLI dengan bendera untuk opsi rendering umum
• Termasuk plugin penting di luar kotak
• Mendukung file konfigurasi JavaScript untuk mengimpor plugin tambahan, dll.
• Dilengkapi dengan konfigurasi Babel bawaan (dengan opsi untuk tidak ditranspile)
• Mendukung kait render untuk mengotomatiskan langkah -langkah pembangunan tambahan
• Modul ES di mana -mana - tidak pernah require() lagi!

Memasang

npm i @metamodern/svelte-render

Penggunaan CLI

Skrip CLI dirilis hanya sebagai modul ES. Versi minimum Node.js adalah 14 (LT terbaru pada tanggal rilis).

npx svelte-render [context] [--key = value]

# default to process.cwd() as context
cd project
npx svelte-render [--key = value]

# skip production optimizations
npx svelte-render --development

# just output HTML from the entry file
npx svelte-render --client=0 --noCss

# specify a custom directory structure
npx svelte-render --src=. --dist=public

# specify the path to your config file
# ** if not at ./render.config.js **
npx svelte-render --configFile=./config/svelte-render.js

File konfigurasi

Opsi dapat ditentukan menggunakan file konfigurasi. File harus menggunakan Sintaks Impor/Ekspor Modul ES. Ekspor defaultnya harus merupakan fungsi yang mengambil objek yang berisi opsi baris perintah sebagai arugment dan mengembalikan objek yang menentukan opsi tambahan untuk diteruskan ke fungsi rendering.

File konfigurasi diharapkan ditemukan di ./render.config.js (relatif terhadap context ), tetapi jalur khusus dapat ditentukan dari baris perintah seperti yang ditunjukkan di atas.

Lihat di bawah untuk daftar semua opsi yang dapat diteruskan ke fungsi rendering.

JavaScript API & Opsi Konfigurasi

API JavaScript dirilis hanya sebagai modul ES. CommonJs require() tidak didukung.

Ekspor default modul adalah fungsi dengan parameter berikut:

 async function ( context : string , {
  src = 'src' ,
  assets = 'assets' ,
  dist = 'dist' ,
  entry = 'index.svelte' ,
  client = 'client.js' ,
  noCss = false ,
  development = false ,
  transpile = ! development ,
  rollupInputPlugins = [ ] ,
  rollupInputOptions = { } ,
  compilerOptions = { } ,
  sveltePreprocess = { } ,
  svelteOptions = { } ,
  terserOptions = { } ,
  browsers = 'defaults' ,
  babelPresets = [ [ '@babel/preset-env' , {
    targets : browsers ,
    corejs : 3 ,
    useBuiltIns : 'usage' ,
  } ] ] ,
  babelPlugins = [ ] ,
  babelOptions = { } ,
  before ,
  onRender ,
  after ,
} = { } ) : Promise < number > // returns 0 on success 

Diperlukan

• Konteks : Jalur ke direktori root proyek

Catatan: Argumen context hanya diperlukan saat menggunakan JavaScript API. Saat menggunakan skrip CLI, context default untuk process.cwd() .

Mengkonfigurasi Struktur Direktori

Opsi berikut dapat ditentukan sebagai nama file atau jalur dan akan diselesaikan relatif terhadap context .

• SRC : Direktori Parent entry dan Sumber client File
• Aset : Direktori Aset Statis Untuk Disalin ke dist
• Dist : Direktori publik di mana file web akan dilayani
• Entri : File SVELTE yang akan di-render sebagai tampilan awal (diabaikan saat bendera development aktif)
• Klien : File sumber JavaScript yang akan digulung sebagai skrip sisi klien (untuk membuat HTML statis saja, mengatur client ke false dan tidak menggunakan bendera development )

Pengaturan bendera opsi rendering

• NOCSS : Jangan menghasilkan CSS yang dihasilkan dari blok SVELTE <style>
• Pengembangan : Lewati optimisasi produksi (markup pra-render, transpiling JS, Minifying JS & CSS)
• Transpile : Gunakan Babel untuk mengubah/polyfill JS sisi klien sesuai kebutuhan untuk browser target (dihidupkan secara default, kecuali bendera development dilewati)

Opsi Rendering Lanjutan (untuk Rollup, Svelte, Terser)

• Rollupinputplugins : Plugin Input (Resmi, Komunitas) untuk dilewati ke Rollup
• RollupInputOptions : Opsi input tambahan untuk dilewati ke rollup
• CompilerOptions : Opsi Kompiler untuk diteruskan ke rollup-plugin-svelte (di bawah tombol compilerOptions )
• Sveltepreprocess : Fungsi preprocessing untuk diteruskan ke rollup-plugin-svelte (di bawah tombol preprocess )
• Svelteoptions : Opsi tambahan untuk diteruskan ke rollup-plugin-svelte
• Terseroptions : Opsi untuk diteruskan ke rollup-plugin-terser

Opsi Transpiling (untuk Babel)

• Browser : Konfigurasi Daftar BrowsersList yang valid
• BabelPreset : Preset untuk diteruskan ke Babel
• Babelplugins : Plugin untuk diteruskan ke Babel
• BabelOptions : Pilihan tambahan untuk diteruskan ke Babel

Catatan: Opsi ini diabaikan saat transpile diatur ke false

Membuat kait

Pengait render adalah fungsi untuk dieksekusi bersama -sama dengan fungsi rendering utama. Setiap fungsi akan dilewatkan context yang diselesaikan dan objek opsi penuh. Fungsi async didukung.

• Sebelum : Fungsi untuk memohon dan menunggu sebelum rendering
• Onrender : Fungsi untuk memohon dan menunggu secara paralel dengan rollup build dari skrip klien/entri
• Setelah : Fungsi untuk memohon dan menunggu setelah rendering

Lisensi

© 2020 Daniel C. Narey

Lisensi ISC