Rollup est un générateur d'applications et de bibliothèques javascript de nouvelle génération. Beaucoup le connaissent depuis longtemps comme un constructeur prometteur qui est bien adapté à la construction de bibliothèques, mais mal adapté aux applications de construction. Cependant, avec le temps, le produit se développe activement.
Je l'ai essayé pour la première fois début 2017. J'ai tout de suite aimé la prise en charge de la compilation dans ES2015, le tremblement d'arbre, le manque de modules dans l'assemblage et bien sûr une simple configuration. Mais c'était un produit brut, avec un petit nombre de plugins et des fonctionnalités très limitées, et j'ai décidé de le laisser pour plus tard et j'ai continué à construire via browserify. La deuxième tentative a eu lieu en 2018, puis elle avait déjà largement dépassé la communauté, les plugins et les fonctionnalités, mais il n'y avait toujours pas assez de qualité dans certaines fonctions, y compris l'observateur. Et enfin, au début de 2019, nous pouvons dire en toute sécurité - avec l'aide de Rollup, vous pouvez créer des applications modernes de manière simple et pratique.
Pour comprendre les avantages, passons en revue les principales fonctionnalités et comparons avec Webpack (la situation est la même pour Browserify).
Configuration simple
Immédiatement, ce qui attire votre attention est une configuration très simple et compréhensible:
export default [{ input: 'src/index.ts', output: [{ file: 'dist/index.min.js', format: 'iife' }], plugins: [
Entrez
rollup -c dans le cosnol et votre paquet commence à s'assembler. Pour l'exportation, vous pouvez fournir un tableau de bundles pour l'assemblage, par exemple, si vous collectez séparément des polyphiles, plusieurs programmes, des travailleurs, etc. En entrée, vous pouvez soumettre un tableau de fichiers, puis des morceaux seront collectés. En sortie, vous pouvez alimenter un tableau de fichiers de sortie et les assembler dans différents systèmes modulaires: iife, commonjs, umd.
Assistance Iife
Prise en charge de l'assemblage dans la fonction elle-même appelée sans modules. Pour comprendre, prenons le programme le plus célèbre:
console.log("Hello, world!");
conduisez-le via Rollup au format iife et voyez le résultat:
(function () { 'use strict'; console.log("Hello, world!"); }());
La sortie est un code très compact, seulement 69 octets. Si vous ne comprenez toujours pas l'avantage, Webpack / Browserify compilera le code suivant:
Résultat de la construction du Webpack Comme vous pouvez le voir, cela s'est avéré un peu plus dû au fait que Webpack / Browserify ne peut être construit que dans CommonJS. Le gros avantage de l'IIFE est sa compacité et l'absence de conflits entre les différentes versions de CommonJS. Mais il y a un inconvénient, vous ne pouvez pas collecter de morceaux, pour eux, vous devez passer à CommonJS.
Compilation dans ES2015
Le nom «roll-up collector de nouvelle génération» reçu en 2016 pour la possibilité de se réunir en ES2015. Et jusqu'à fin 2018, c'était le seul collectionneur qui savait faire ça.
Par exemple, si vous prenez le code:
export class TestA { getData(){return "A"} } console.log("Hello, world!", new TestB().getData());
et conduire à travers Rollup, puis à la sortie, nous obtenons la même chose. Et oui! Début 2019, déjà
87% des navigateurs pouvaient l'exécuter nativement.
Puis en 2016, cela a semblé être une percée, car il y avait un grand nombre d'applications qui n'avaient pas besoin de prise en charge pour les anciens navigateurs: les administrateurs, les kiosques, pas les applications Web, et il n'y avait pas d'outils de construction pour eux. Et maintenant, avec Rollup, nous pouvons collecter plusieurs bundles en un seul passage, en es3, es5, es2015, exnext et en fonction du navigateur télécharger le nécessaire.
Un autre grand avantage d'ES2015 est sa taille et sa vitesse d'exécution. En raison du manque de transposition vers une couche inférieure, le code se révèle beaucoup plus compact, et en raison de l'absence de code auxiliaire généré par les transpilateurs, ce code fonctionne également 3 fois plus rapidement (selon mes tests subjectifs).
Tremblement d'arbre
C'est une puce Rollup, il l'a inventée! Webpack a essayé de l'implémenter pendant de nombreuses années d'affilée, mais ce n'est qu'avec la version 4 que quelque chose a commencé à fonctionner. Browserify se porte très mal.
Quel genre d'animal est-ce? Prenons l'exemple des deux fichiers suivants:
exécuter Rollup et obtenir:
(function () { 'use strict'; class TestB { getData() { return "B"; } } const test = new TestB(); console.log("Hello, world!", test.getData()); }());
À la suite de TreeShaking, le code mort a été supprimé même au stade de la résolution des dépendances. Grâce à cela, les assemblages Rollup se révèlent beaucoup plus compacts. Voyons maintenant ce que Webpack génère:
Résultat de la construction du Webpack Et ici, nous pouvons tirer deux conclusions. Fin 2018, le premier Webpack a encore appris à comprendre et à construire ES2015. Le second, absolument tout le code tombe dans l'assembly, mais le code mort est déjà supprimé à l'aide du minifieur Terser (fork et successeur d'UglifyES). À la suite de cette approche, des paquets plus épais que Rollup, sur un habr a déjà beaucoup écrit à ce sujet, nous ne nous arrêterons pas là-dessus.
Plugins
Seul l'ES2015 + nu peut être assemblé à partir d'une boîte Rollup. Afin de lui enseigner des fonctionnalités supplémentaires, telles que la connexion de commonjs, de modules dactylographiés, le chargement de html et scss, etc., vous devez connecter des plugins.
Cela se fait très simplement:
import nodeResolve from 'rollup-plugin-node-resolve'; import commonJs from 'rollup-plugin-commonjs'; import typeScript from 'rollup-plugin-typescript2'; import postcss from 'rollup-plugin-postcss'; import html from 'rollup-plugin-html'; import visualizer from 'rollup-plugin-visualizer'; import {sizeSnapshot} from "rollup-plugin-size-snapshot"; import {terser} from 'rollup-plugin-terser'; export default [{ input: 'src/index.ts', output: [{ file: 'dist/index.r.min.js', format: 'iife' }], plugins: [ nodeResolve(),
Si simple, un plug-in est connecté en un seul mot. Cette configuration peut collecter n'importe quelle application complexe et génère même une analyse de bundle en sortie.
Résumé
Et maintenant, armés de nouvelles connaissances, faisons une configuration qui collectera séparément les polyphiles, une application distincte pour les anciens et les nouveaux navigateurs, un travailleur de service pour pwa et un travailleur Web pour des calculs complexes dans le brounund.
import nodeResolve from 'rollup-plugin-node-resolve'; import commonJs from 'rollup-plugin-commonjs'; import typeScript from 'rollup-plugin-typescript2'; import postcss from 'rollup-plugin-postcss'; import html from 'rollup-plugin-html'; import visualizer from 'rollup-plugin-visualizer'; import { sizeSnapshot } from "rollup-plugin-size-snapshot"; import { terser } from 'rollup-plugin-terser'; const getPlugins = (options) => [ nodeResolve(), commonJs(), postcss(), html(), typeScript({ tsconfig: "tsconfig.json", tsconfigOverride: { compilerOptions: { "target": options.target } } }), sizeSnapshot(), terser(), visualizer() ]; export default [{ input: 'src/polyfills.ts', output: [{ file: 'dist/polyfills.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) },{ input: 'src/index.ts', output: [{ file: 'dist/index.next.min.js', format: 'iife' }], plugins: getPlugins({ target: "esnext" }) },{ input: 'src/index.ts', output: [{ file: 'dist/index.es5.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) },{ input: 'src/index.ts', output: [{ file: 'dist/index.es3.min.js', format: 'iife' }], plugins: getPlugins({ target: "es3" }) },{ input: 'src/serviceworker.ts', output: [{ file: 'dist/serviceworker.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) },{ input: 'src/webworker.ts', output: [{ file: 'dist/webworker.min.js', format: 'iife' }], plugins: getPlugins({ target: "es5" }) }];
Tous les bundles faciles et les applications Web rapides!