🚀 Tempi di bundle superveloci
Parcel utilizza i worker process per abilitare la compilazione multicore, e ha una filesystem cache per rebuild veloci anche dopo un riavvio.
📦 Crea un bundle con i tuoi assets
Parcel supporta nativamente JS, CSS, HTML, files, e altro ancora - senza plugin.
🐠 Conversioni automatiche
Il codice è convertito automaticamente con Babel, PostCSS, e PostHTML se richiesto - perfino
node_modules
.
✂️ Code splitting senza configurazioni
Usando la sintassi dinamica import()
, Parcel divide i tuoi output bundles così puoi caricare
solo ciò che ti serve in ogni momento.
🔥 Hot module replacement
Parcel aggiorna automaticamente i moduli nel browser ogni volta che effettui dei cambiamenti al codice durante lo sviluppo, senza configurazioni.
🚨 Error logging chiaro
Parcel ti fornisce il logging con syntax highlighting se riscontra errori nella compilazione.
Ciao Mondo
Inizia impostando un file HTML come entry point della tua applicazione. Parcel segue le dipendenze da quel file e crea un bundle dell'intera applicazione.
✏️ index.html
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
🛠 index.js
// importa un componente
import main from './main';
main();
🛠 main.js
// importa un modulo CSS
import classes from './main.css';
export default () => {
console.log(classes.main);
};
💅 main.css
.main {
/* File immagine */
background: url('./images/background.png');
color: red;
}
Ti basta lanciare parcel index.html
per inizializzare un dev server. L'importazione di
JavaScript, CSS, immagini, e altri file funzionerà magicamente! 👌
Benchmarks
Bundler | Tempo |
---|---|
browserify | 22.98s |
webpack | 20.71s |
parcel | 9.98s |
parcel - con cache | 2.64s |
Basato su un'applicazione di dimensioni medie, contenente 1726 moduli, 6,5 M non compressi. Test eseguito su un MacBook Pro 2016 con 4 core fisici.