Rumah >hujung hadapan web >tutorial js >Pengenalan kepada Rollup.js JavaScript Bundler

Pengenalan kepada Rollup.js JavaScript Bundler

尊渡假赌尊渡假赌尊渡假赌asal: 2025-02-10 16:01:10726semak imbas

rollup.js: modul modul javascript generasi akan datang

An Introduction to the Rollup.js JavaScript Bundler

rollup.js, yang dicipta oleh Rich Harris (juga pengarang Svelte), adalah modul modul JavaScript moden yang cemerlang dalam menyusun pelbagai fail sumber ke dalam satu bundle yang dioptimumkan. Tidak seperti beberapa bundlers all-in-one, Rollup memberi tumpuan terutamanya kepada JavaScript, menawarkan kelajuan dan kelebihan penyesuaian. Mari kita meneroka ciri -ciri utamanya dan cara menggunakannya dengan berkesan.

kelebihan menggunakan rollup.js:

Pembangunan yang dipermudahkan: Menguruskan fail sumber yang lebih kecil dan mandiri dengan ketara meningkatkan aliran kerja pembangunan.
Kualiti kod yang dipertingkatkan: mengintegrasikan dengan lancar dengan linter, formatters, dan sintaks semasa proses binaan.
Pengoptimuman Tree-Shaking: dengan bijak menghilangkan kod yang tidak digunakan, menghasilkan berkas yang lebih kecil dan lebih cepat.
keserasian ke belakang: Transpil JavaScript moden (ES6) ke ES5, memastikan sokongan pelayar yang lebih luas.
output fleksibel: menghasilkan pelbagai format output (modul ES5, ES6, CommonJs) untuk memenuhi pelbagai keperluan projek.
Prestasi: umumnya lebih cepat dan lebih disesuaikan daripada bundlers lain, terutamanya dengan konfigurasi kompleks.

Pemasangan:

rollup.js memerlukan node.js v8.0.0 atau lebih baru. Anda boleh memasangnya secara global:

<code class="language-bash">npm install rollup --global</code>

Untuk pasukan yang lebih besar yang bekerja pada projek Node.js, pemasangan tempatan disyorkan untuk konsistensi versi:

<code class="language-bash">npm install rollup --save-dev</code>

Selepas pemasangan tempatan, gunakan

untuk melaksanakan arahan. Sebagai alternatif, tentukan arahan rollup dalam skrip npx rollup anda: package.json

<code class="language-json">"scripts": {
  "watch": "npx rollup ./src/main.js --file ./build/bundle.js --format es --watch",
  "build": "npx rollup ./src/main.js --file ./build/bundle.js --format es",
  "help": "npx rollup --help"
}</code>

skrip ini boleh dijalankan menggunakan

atau npm run watch. Tutorial ini terutamanya menggunakan npm run build untuk keserasian yang lebih luas. npx rollup

Contoh mudah:

mari kita buat contoh jam digital asas untuk menggambarkan fungsi Rollup. Anda boleh memuat turun contoh fail dari GitHub atau mencipta mereka secara manual.

src/main.js: (titik masuk utama)

<code class="language-javascript">import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';

const clock = dom.get('.clock');

if (clock) {
  console.log('initializing clock');
  setInterval(() => {
    clock.textContent = formatHMS();
  }, 1000);
}</code>

(perpustakaan utiliti dom)

(fungsi pemformatan masa)

<code class="language-javascript">export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}</code>

(html untuk memaparkan jam)

<code class="language-javascript">function timePad(n) {
  return String(n).padStart(2, '0');
}
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds());
}</code>

Permulaan cepat:

<code class="language-html"><!DOCTYPE html>


  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">


  <h1>Clock</h1>
  <time class="clock"></time>
  
   
</code>

Untuk membungkus kod, jalankan arahan ini dari direktori root projek anda:

Ini mencipta

. Perhatikan bahawa fungsi yang tidak digunakan dikeluarkan melalui gegaran pokok. Rujukan

fail ini dibundel.

pilihan konfigurasi rollup.js utama:

--file atau -o: Menentukan nama fail output.
--format: Menjana peta sumber untuk debugging yang lebih mudah (gunakan -f untuk peta sumber sebaris). iife es cjs atau umd: jam tangan untuk perubahan fail dan membina semula secara automatik. amd system
: menggunakan fail konfigurasi (mis., --sourcemap). --sourcemap inline
--watch Fail konfigurasi (rollup.config.js): -w
Fail konfigurasi memudahkan menguruskan pelbagai pilihan dan plugin. Berikut adalah contoh: --config -c rollup.config.js Jalankan dengan:

plugin:

extensibility Rollup berasal dari sistem pluginnya. Plugin biasa termasuk:

<code class="language-bash">npm install rollup --global</code>

npx rollup --config: Mengendalikan resolusi modul Node.js.

: Menukar modul Commonjs ke modul ES.

: menggantikan token dalam kod anda semasa proses binaan.

: Transpiles ES6 Code to ES5 (pertimbangkan alternatif untuk sokongan pelayar moden). @rollup/plugin-node-resolve
: meminimumkan kod output. @rollup/plugin-commonjs
ingat untuk memasang plugin menggunakan @rollup/plugin-replace. Sertakan mereka dalam array
anda. @rollup/plugin-buble
Teknik lanjutan: rollup-plugin-terser

npm install <plugin-name> --save-dev</plugin-name> Pembolehubah persekitaran: plugins Gunakan pembolehubah persekitaran (mis., ) Untuk mengubah suai proses pembentukan anda secara kondusif (pembangunan vs pengeluaran). rollup.config.js

berbilang bundle: Konfigurasi rollup untuk menghasilkan pelbagai berkas dari titik kemasukan yang berbeza.

Selanjutnya mengoptimumkan aplikasi anda dengan memisahkan kod ke dalam ketulan yang lebih kecil yang dimuatkan atas permintaan. NODE_ENV rollup.js menyediakan cara yang kuat dan fleksibel untuk membungkus modul JavaScript anda. Dengan memahami ciri terasnya dan ekosistem plugin, anda boleh membuat aplikasi JavaScript yang sangat dioptimumkan dan dikekalkan. Ingatlah untuk berunding dengan dokumentasi Rollup.js rasmi untuk maklumat yang paling terkini dan senarai plugin yang komprehensif.

Atas ialah kandungan terperinci Pengenalan kepada Rollup.js JavaScript Bundler. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript json html es6 npm Array define for date format include Directory using map JS dom this display github Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Menyiapkan Vs Kod untuk Pembangunan ReactArtikel seterusnya：Cara Menyiapkan Vs Kod untuk Pembangunan React

Artikel berkaitan

Lihat lagi