Une introduction au bundler javascript rollup.js-js tutoriel-php.cn

Une introduction au bundler javascript rollup.js

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

Libérer： 2025-02-10 16:01:10

original

631 Les gens l'ont consulté

rollup.js: un module JavaScript de nouvelle génération Bundler

An Introduction to the Rollup.js JavaScript Bundler

rollup.js, créé par Rich Harris (également l'auteur de Svelte), est un bundler de module JavaScript moderne qui excelle dans la compilation de plusieurs fichiers source en un seul bundle optimisé. Contrairement à certains bundlers tout-en-un, Rollup se concentre principalement sur JavaScript, offrant des avantages de vitesse et de personnalisation. Explorons ses caractéristiques clés et comment l'utiliser efficacement.

Avantages de l'utilisation de rollup.js:

Développement simplifié: La gestion des fichiers source plus petits et autonomes améliore considérablement le flux de travail de développement.
Qualité améliorée du code: Intregate de manière transparente aux liners, aux formateurs et aux vérificateurs de syntaxe pendant le processus de construction.
Optimisation de partage d'arbres: supprime intelligemment le code inutilisé, résultant en des faisceaux plus petits et plus rapides.
Compatibilité arrière: transpile le JavaScript moderne (ES6) à ES5, assurant un support de navigateur plus large.
Sortie flexible: génère plusieurs formats de sortie (modules ES5, ES6, CommonJS) pour répondre à divers besoins du projet.
Performance: Généralement plus rapide et plus personnalisable que les autres bundlers, en particulier avec des configurations complexes.

Installation:

rollup.js nécessite Node.js v8.0.0 ou ultérieure. Vous pouvez l'installer à l'échelle mondiale:

npm install rollup --global

Copier après la connexion

Pour les grandes équipes travaillant sur les projets Node.js, l'installation locale est recommandée pour la cohérence de la version:

npm install rollup --save-dev

Copier après la connexion

Après l'installation locale, utilisez npx rollup pour exécuter des commandes. Alternativement, définissez les commandes Rollup dans vos package.json scripts:

"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"
}

Copier après la connexion

Ces scripts peuvent être exécutés en utilisant npm run watch ou npm run build. Ce tutoriel utilise principalement npx rollup pour une compatibilité plus large.

Un exemple simple:

Créons un exemple d'horloge numérique de base pour illustrer la fonctionnalité de Rollup. Vous pouvez télécharger des exemples de fichiers à partir de github ou les créer manuellement.

src / main.js: (point d'entrée principal)

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

Copier après la connexion

src / lib / dom.js: (bibliothèque utilitaire DOM)

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

Copier après la connexion

src / lib / time.js: (fonctions de formatage du temps)

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

Copier après la connexion

index.html: (html pour afficher l'horloge)

<!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>

Copier après la connexion

Démarrage rapide:

Pour regrouper le code, exécutez cette commande à partir du répertoire racine de votre projet:

npx rollup ./src/main.js --file ./build/bundle.mjs --format iife

Copier après la connexion

cela crée build/bundle.mjs. Notez que les fonctions inutilisées sont supprimées par la baisse des arbres. Le index.html fait référence à ce fichier groupé.

Key Rollup.js Options de configuration:

--file ou -o: Spécifie le nom du fichier de sortie.
--format ou -f: définit le format de sortie (iife, es, cjs, umd, amd, system).
--sourcemap: génère une carte source pour un débogage plus facile (utiliser --sourcemap inline pour une carte source en ligne).
--watch ou -w: Montres pour les modifications de fichiers et reconstruisez automatiquement.
--config ou -c: utilise un fichier de configuration (par exemple, rollup.config.js).

Fichier de configuration (rollup.config.js):

Un fichier de configuration simplifie la gestion de plusieurs options et plugins. Voici un exemple:

npm install rollup --global

Copier après la connexion

Exécutez avec: npx rollup --config

Plugins:

L'extensibilité de Rollup provient de son système de plugin. Les plugins courants incluent:

@rollup/plugin-node-resolve: gère la résolution du module Node.js.
@rollup/plugin-commonjs: Convertit les modules CommonJS en modules ES.
@rollup/plugin-replace: remplace les jetons dans votre code pendant le processus de construction.
@rollup/plugin-buble: transpile le code ES6 vers ES5 (considérez les alternatives pour la prise en charge moderne du navigateur).
rollup-plugin-terser: minifie le code de sortie.

N'oubliez pas d'installer des plugins en utilisant npm install <plugin-name> --save-dev</plugin-name>. Incluez-les dans le tableau plugins dans votre rollup.config.js.

Techniques avancées:

Variables d'environnement: Utiliser des variables d'environnement (par exemple, NODE_ENV) pour modifier conditionnellement votre processus de construction (développement vs production).
Multipliers Bundles: Configurez Rollup pour générer plusieurs faisceaux à partir de différents points d'entrée.
Fractionnement du code: Optimiser davantage votre application en divisant le code en morceaux plus petits chargés à la demande.

rollup.js fournit un moyen puissant et flexible de regrouper vos modules JavaScript. En comprenant ses fonctionnalités principales et son écosystème de plugin, vous pouvez créer des applications JavaScript hautement optimisées et maintenables. N'oubliez pas de consulter la documentation officielle Rollup.js pour les informations les plus à jour et une liste complète de plugins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!