Verwenden von Parzel als Bundler für React -Anwendungen

Webpack ist nicht das einzige Spiel in der Stadt für das Asset -Management. Parcel bietet eine überzeugende Alternative und bietet optimierte Asset -Bündelung mit Nullkonfiguration. Im Gegensatz zu anderen Bundleuten, die umfangreicher Setup -Code erfordern, ist die Einfachheit von Parcel ein großer Vorteil. Seine Geschwindigkeit ist auch bemerkenswert und nutzt die Multicore -Verarbeitung für deutlich schnellere Bauzeiten im Vergleich zu komplexeren Bündlern.

Zu den wichtigsten Funktionen und Vorteilen von Paket gehören:

• Effiziente Codeaufteilung über dynamische Importe.
• Vielseitige Asset -Handhabung für verschiedene Dateitypen, einschließlich HTML, CSS und JavaScript.
• Heißmodulersatz (HMR) für eine schnelle Entwicklung ohne ständige Seiten -Aktualisierung.
• Lösches Fehler in der Konsole zum einfacheren Debuggen.
• Unterstützung für Umgebungsvariablen zur Verwaltung von Entwicklungs- und Produktionseinstellungen.
• Optimierter Produktionsmodus für schnellere Builds, indem unnötige Schritte eliminiert werden.

Dieser Artikel zeigt, wie ein React -Projekt mit Parcel erstellt wird und eine Alternative zum Erstellen von React -App zeigt. Lassen Sie uns einen anderen Ansatz zur Reaktionsentwicklung untersuchen.

Projekt -Setup

1. Projektverzeichnis erstellen:

 mkdir csstricks-react-parcel && cd $ _

2. package.json initialisieren.json: Verwenden Sie entweder NPM oder Garn:

 # NPM
npm init -y

# Garn (in diesem Tutorial verwendet)
Garn init -y

3. Abhängigkeiten installieren: Paket und Babel lokal installieren:

 Garn hinzufügen Paket-Bundler Babel-Preset-Env Babel-Preset-React--dev
Garn-Add-React React-DOM

4. Babel konfigurieren: Erstellen Sie eine .babelrc -Datei mit dem folgenden Inhalt:

 {
  "Presets": ["Env", "React"]
}

5. Erstellen index.js (App -Komponente):

 Import reagieren aus "reagieren";
Importreactom von 'react-dom';

Die Klassen -App erweitert React.comPonent {
  render () {
    zurückkehren (
      <react.fragment><h2 id="Hallo">Hallo!</h2></react.fragment>
    );
  }
}

const rootelement = document.getElementById ("root");
Reactdom.render (<app></app> , Wurzelelement);

6. Erstellen index.html (im src -Verzeichnis):

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Paketreaktion Beispiel</title>


  <div id="root"></div>

7. Konfigurieren Sie package.json (Startskript):

 "Skripte": {
  "Start": "node_env = Entwicklungspaket src/index.html --open"
}

8. Führen Sie die Anwendung aus: Führen Sie yarn start in Ihrem Terminal aus. Die App sollte in Ihrem Browser unter http://localhost:1234/ starten.

Styling mit Sass

Paket enthält Postcss. Installieren Sie die erforderlichen Pakete, um SASS zu verwenden:

 Garn hinzufügen-Dev Node-Sass Autoprefixer

Konfigurieren Sie package.json postcss -Abschnitt (falls erforderlich):

 "postcss": {{
  "Module": Falsch,
  "Plugins": {
    "Autoprefixer": {
      "Browser": ["> 1%", "Letzte 4 Versionen", "Firefox ESR", "nicht dh <h3 id="Produktionsbau"> Produktionsbau</h3><p> Konfigurieren Sie Ihr <code>package.json</code> für Produktionsbauten:</p><pre class="brush:php;toolbar:false"> "Skripte": {
  "Start": "node_env = Entwicklungspaket src/index.html --open",
  "Build": "node_env = Produktionspaket bauen dist/ index.html--public-url ./"
}

Führen Sie yarn build aus, um einen produktionsbereiten Build im dist -Ordner zu erstellen. Optionen wie --out-dir , --no-minify und --no-cache bieten eine weitere Anpassung an.

Mist (React App -Paket erstellen)

React App Parcel (CRAP) vereinfacht das Projekt -Setup:

 NPX erstellen reag-app-parcel my-App
CD my-App
Garn beginnen

Abschluss

Die Benutzerfreundlichkeit und die optimierten Build -Zeiten von Parcel machen es zu einem starken Anwärter auf Ihr nächstes React -Projekt. Seine wachsende Popularität (30.000 Github Stars) spricht für seine Akzeptanz der Gemeinschaft.

Ressourcen

• Paketbeispiele
• Super Paket

Github -Repository für den Quellcode dieses Tutorials (zu bereitgestellter Link).

Das obige ist der detaillierte Inhalt vonVerwenden von Parzel als Bundler für React -Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!