Pengenalan kepada Rollup.js JavaScript Bundler-tutorial js-php.cn

Pengenalan kepada Rollup.js JavaScript Bundler

尊渡假赌尊渡假赌尊渡假赌

Lepaskan： 2025-02-10 16:01:10

asal

648 orang telah melayarinya

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:

npm install rollup --global

Salin selepas log masuk

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

npm install rollup --save-dev

Salin selepas log masuk

Selepas pemasangan tempatan, gunakan

untuk melaksanakan arahan. Sebagai alternatif, tentukan arahan rollup dalam skrip npx rollup anda: package.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"
}

Salin selepas log masuk

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)

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);
}

Salin selepas log masuk

(perpustakaan utiliti dom)

(fungsi pemformatan masa)

export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

Salin selepas log masuk

(html untuk memaparkan jam)

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());
}

Salin selepas log masuk

Permulaan cepat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
  <h1>Clock</h1>
  <time class="clock"></time>
  <🎜>
  <🎜> </body>
</html>

Salin selepas log masuk

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:

npm install rollup --global

Salin selepas log masuk

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!