Rollup es una aplicaci贸n javascript de nueva generaci贸n y un generador de bibliotecas. Muchas personas lo conocen desde hace mucho tiempo como un generador prometedor que es muy adecuado para crear bibliotecas, pero poco adecuado para crear aplicaciones. Sin embargo, a medida que pasa el tiempo, el producto se est谩 desarrollando activamente.
Lo prob茅 por primera vez a principios de 2017. Inmediatamente me gust贸 por admitir la compilaci贸n en ES2015, los 谩rboles, la falta de m贸dulos en el ensamblaje y, por supuesto, una configuraci贸n simple. Pero luego era un producto en bruto, con una peque帽a cantidad de complementos y una funcionalidad muy limitada, y decid铆 dejarlo para m谩s adelante y segu铆 construyendo a trav茅s de browserify. El segundo intento fue en 2018, luego ya hab铆a superado significativamente la comunidad, los complementos y la funcionalidad, pero a煤n no hab铆a suficiente calidad en algunas funciones, incluido el observador. Y finalmente, a principios de 2019, podemos decir con seguridad: con la ayuda de Rollup, puede crear aplicaciones modernas de manera simple y conveniente.
Para comprender los beneficios, repasemos las caracter铆sticas clave y comparemos con Webpack (la situaci贸n es la misma para Browserify).
Configuraci贸n simple
Inmediatamente lo que llama la atenci贸n es una configuraci贸n muy simple y comprensible:
export default [{ input: 'src/index.ts', output: [{ file: 'dist/index.min.js', format: 'iife' }], plugins: [
Ingrese
rollup -c en el cosnol y su paquete comenzar谩 a ensamblarse. Para la exportaci贸n, puede proporcionar una variedad de paquetes para el ensamblaje, por ejemplo, si recolecta por separado los pol铆filos, varios programas, trabajadores, etc. En la entrada, puede enviar una matriz de archivos, luego se recopilar谩n fragmentos. En la salida, puede alimentar una matriz de archivos de salida y ensamblarlos en diferentes sistemas modulares: iife, commonjs, umd.
Soporte de vida
Soporte para ensamblar en la propia funci贸n llamada sin m贸dulos. Para comprender, tomemos el programa m谩s famoso:
console.log("Hello, world!");
conduzca a trav茅s de Rollup a formato iife y vea el resultado:
(function () { 'use strict'; console.log("Hello, world!"); }());
La salida es un c贸digo muy compacto, solo 69 bytes. Si a煤n no comprende la ventaja, Webpack / Browserify compilar谩 el siguiente c贸digo:
Resultado de compilaci贸n del paquete web Como puede ver, result贸 un poco m谩s debido al hecho de que Webpack / Browserify solo se puede construir en CommonJS. La gran ventaja de IIFE es su compacidad y la ausencia de conflictos entre las diferentes versiones de CommonJS. Pero hay un inconveniente, no puedes recolectar fragmentos, para ellos debes cambiar a CommonJS.
Compilaci贸n en ES2015
El paquete acumulativo de nombre "coleccionista de pr贸xima generaci贸n" en 2016 recibi贸 la capacidad de ensamblar en ES2015. Y hasta finales de 2018, fue el 煤nico coleccionista que sab铆a c贸mo hacer esto.
Por ejemplo, si toma el c贸digo:
export class TestA { getData(){return "A"} } console.log("Hello, world!", new TestB().getData());
y conducir a trav茅s de Rollup, luego en la salida obtenemos lo mismo. Y si! A principios de 2019, ya el
87% de los navegadores pueden ejecutarlo de forma nativa.
Luego, en 2016, parec铆a un gran avance, porque hab铆a una gran cantidad de aplicaciones que no necesitaban soporte para navegadores antiguos: administradores, quioscos, no aplicaciones web, y no hab铆a herramientas de compilaci贸n para ellos. Y ahora con Rollup podemos recopilar varios paquetes en una sola pasada, en es3, es5, es2015, exnext y, seg煤n el navegador, descargue el necesario.
Tambi茅n una gran ventaja de ES2015 es su tama帽o y velocidad de ejecuci贸n. Debido a la falta de transpiraci贸n a una capa inferior, el c贸digo resulta ser mucho m谩s compacto, y debido a la falta de un c贸digo auxiliar generado por los transpiladores, este c贸digo tambi茅n funciona 3 veces m谩s r谩pido (seg煤n mis pruebas subjetivas).
Sacudida del 谩rbol
Este es un chip Rollup, 隆茅l lo invent贸! Webpack ha estado intentando implementarlo durante muchos a帽os seguidos, pero solo con la versi贸n 4 comenz贸 a funcionar algo. A Browserify le est谩 yendo muy mal.
驴Qu茅 tipo de animal es este? Tomemos los siguientes dos archivos como ejemplo:
ejecutar a trav茅s de Rollup y obtener:
(function () { 'use strict'; class TestB { getData() { return "B"; } } const test = new TestB(); console.log("Hello, world!", test.getData()); }());
Como resultado de TreeShaking, el c贸digo muerto se descart贸 incluso en la etapa de resoluci贸n de dependencias. Gracias a lo que los conjuntos de rollup resultan mucho m谩s compactos. Ahora veamos qu茅 genera Webpack:
Resultado de compilaci贸n del paquete web Y aqu铆 podemos sacar dos conclusiones. El primer paquete web a finales de 2018 todav铆a aprendi贸 a comprender y construir ES2015. El segundo, absolutamente todo el c贸digo cae en el ensamblaje, pero el c贸digo muerto ya se elimina usando el minificador Terser (fork y sucesor de UglifyES). Como resultado de este enfoque, los paquetes m谩s gruesos que Rollup, en un habr ya escribieron mucho al respecto, no nos detendremos en 茅l.
Complementos
Solo el ES2015 + desnudo puede ensamblarse desde una caja de Rollup. Para ense帽arle funcionalidades adicionales, como conectar commonjs, m贸dulos de mecanograf铆a, cargar html y scss, etc., debe conectar complementos.
Esto se hace de manera muy simple:
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(),
Tan simple, un complemento est谩 conectado en una palabra. Esta configuraci贸n puede recopilar cualquier aplicaci贸n compleja e incluso genera un an谩lisis de paquete en la salida.
Resumen
Y ahora, armados con nuevos conocimientos, hagamos una configuraci贸n que recopile por separado los pol铆filos, una aplicaci贸n separada para navegadores antiguos y nuevos, un trabajador de servicios para pwa y un trabajador web para c谩lculos complejos en general.
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" }) }];
隆Todos los paquetes f谩ciles y aplicaciones web r谩pidas!