Il Web application bundler superveloce, senza configurazioni.

Inizia Ora GitHub

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