recherche

Maison >interface Web >js tutoriel >Une introduction au bundler javascript rollup.js

Une introduction au bundler javascript rollup.js

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌original
2025-02-10 16:01:10653parcourir

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: 

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

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

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

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

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

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) 
<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>
  • src / lib / dom.js: (bibliothèque utilitaire DOM) 
<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>
  • src / lib / time.js: (fonctions de formatage du temps) 
<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>
  • index.html: (html pour afficher l'horloge) 
<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>

Démarrage rapide:

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

<code class="language-bash">npx rollup ./src/main.js --file ./build/bundle.mjs --format iife</code>

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: 

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

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!

JavaScript json html es6 npm Array define for date format include Directory using map JS dom this display github Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment configurer VS Code pour React DevelopmentArticle suivant：Comment configurer VS Code pour React Development

Articles Liés

Voir plus