Ausführliche Erläuterung des Beispiels einer Paketverpackung
Dieser Artikel stellt hauptsächlich das Paketverpackungsbeispiel (React HelloWorld) vor und stellt die Eigenschaften und Verwendungsbeispiele der Paketverpackung im Detail vor. Wenn Sie interessiert sind, können Sie es hoffentlich jedem helfen.
Paketverpackungsfunktionen
Extrem schnelle Verpackungszeit
Parcel verwendet Worker-Prozesse, um die Multi-Core-Kompilierung zu ermöglichen. Es gibt auch einen Dateisystem-Cache, um eine schnelle Neukompilierung auch nach einem Neustart des Builds zu ermöglichen.
Verpacken Sie alle Ihre Ressourcen
Parcel bietet sofort einsatzbereite Unterstützung für JS, CSS, HTML, Dateien und mehr, und es sind keine Plugins erforderlich.
Automatische Konvertierung
Bei Bedarf werden Babel, PostCSS und PostHTML und sogar das Paket node_modules verwendet, um den Code automatisch zu konvertieren.
Codeaufteilung konfigurieren
Mithilfe der dynamischen import()-Syntax teilt Parcel Ihre Ausgabedateibündel (Bundles) auf, sodass Sie beim ersten Laden nur den Code laden müssen, den Sie benötigen.
Hot-Modulaustausch
Parcel erfordert keine Konfiguration. Wenn Sie sich in der Entwicklungsumgebung befinden, wird das Modul im Browser automatisch aktualisiert, wenn sich Ihr Code ändert.
Freundliches Fehlerprotokoll
Wenn ein Fehler auftritt, gibt Parcel syntaxhervorgehobene Codeausschnitte aus, um Ihnen bei der Lokalisierung des Problems zu helfen.
React HelloWorld-App im Paket mit Parcel. GitHub-Adresse: https://github.com/justjavac/parcel-example/tree/master/react-helloworld
0. Erstellen Sie ein neues Verzeichnis
mkdir react-helloworld cd react-helloworld
1. npm initialisieren
yarn init -y
oder
npm init -y
Die package.json-Datei wird zu diesem Zeitpunkt erstellt. Der Dateiinhalt ist:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}2 . React hinzufügen
Garn:
yarn add react react-dom
npm:
npm install react react-dom --save
Inhalt der package.json-Datei:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0"
+ }
}3. Babel hinzufügen
Neu. babelrc-Datei
touch .babelrc
Eingabeinhalt:
{
"presets": ["react"]
}Babel-Preset hinzufügen -react:
Garn:
yarn add babel-preset-react -D
npm:
npm install babel-preset-react --D
At Diesmal der Inhalt der package.json-Datei:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
- }
+ },
+ "devDependencies": {
+ "babel-preset-react": "^6.24.1"
+ }
}5. Paket hinzufügen
Garn:
yarn add parcel-bundler -D
npm:
npm install parcel-bundler --D
Zu diesem Zeitpunkt ist der Inhalt der package.json-Datei:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
- "babel-preset-react": "^6.24.1"
+ "babel-preset-react": "^6.24.1",
+ "parcel-bundler": "^1.0.3"
}
}6. Erstellen Sie eine neue index.html-Datei
Inhalt
<html> <body> <p id="root"></p> <script src="./index.js"></script> </body> </html>
7 . Erstellen Sie eine neue index.js-Datei
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById("root")); 8. Verpackung hinzufügen Befehl
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "parcel index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-preset-react": "^6.24.1"
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.0.3"
}
}9. Abschließen
Ausführen
yarn start
oder
npm start
Öffnen Sie http://localhost:1234 im Browser
Die Verpackung Der Prozess erzeugt zwei Verzeichnisse, .cache und dist. Für Git-Projekte können Sie eine neue .gitignore-Datei erstellen, um diese beiden Verzeichnisse zu ignorieren:
.cache dist node_modules
GitHub-Adresse : https://github.com/justjavac/parcel-example/tree /master/react-helloworld
Verwandte Empfehlungen:
Packaging Tool Parcel Zero-Configuration Vue Entwicklungsgerüst
Parcel.js und Vue 2.x Beispiel für extrem schnelle, konfigurationsfreie Verpackungserfahrung
Detaillierte Erläuterung von NodeJS zur Implementierung von Simple Gulp Verpackung
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispiels einer Paketverpackung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11
Mar 08, 2024 pm 03:06 PM
Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer
Detaillierte Erläuterung der Divisionsoperation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL
Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators
Mar 19, 2024 pm 04:33 PM
Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen
Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs
Feb 22, 2024 pm 08:21 PM
Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen
Detaillierte Erläuterung des Linux-Befehls „curl'.
Feb 21, 2024 pm 10:33 PM
Detaillierte Erläuterung des Linux-Befehls „curl“ Zusammenfassung: Curl ist ein leistungsstarkes Befehlszeilentool für die Datenkommunikation mit dem Server. In diesem Artikel wird die grundlegende Verwendung des Curl-Befehls vorgestellt und tatsächliche Codebeispiele bereitgestellt, um den Lesern zu helfen, den Befehl besser zu verstehen und anzuwenden. 1. Was ist Locken? Curl ist ein Befehlszeilentool zum Senden und Empfangen verschiedener Netzwerkanfragen. Es unterstützt mehrere Protokolle wie HTTP, FTP, TELNET usw. und bietet umfangreiche Funktionen wie Datei-Upload, Datei-Download, Datenübertragung und Proxy
Detaillierte Erläuterung der VSCode-Funktionen: Wie hilft es Ihnen, die Arbeitseffizienz zu verbessern?
Mar 25, 2024 pm 05:27 PM
Detaillierte Erläuterung der VSCode-Funktionen: Wie hilft es Ihnen, die Arbeitseffizienz zu verbessern? Mit der kontinuierlichen Weiterentwicklung der Softwareentwicklungsbranche ist das Streben der Entwickler nach Arbeitseffizienz und Codequalität zu wichtigen Zielen ihrer Arbeit geworden. In diesem Prozess wird die Wahl des Code-Editors zu einer Schlüsselentscheidung. Unter vielen Editoren ist Visual Studio Code (kurz VSCode) bei den meisten Entwicklern aufgrund seiner leistungsstarken Funktionen und flexiblen Skalierbarkeit beliebt. In diesem Artikel werden einige Funktionen von VSCode ausführlich vorgestellt und erläutert
Detaillierte Analyse der C-Sprachlernroute
Feb 18, 2024 am 10:38 AM
Als weit verbreitete Programmiersprache im Bereich der Softwareentwicklung ist die Sprache C für viele Programmieranfänger die erste Wahl. Das Erlernen der C-Sprache kann uns nicht nur dabei helfen, grundlegende Programmierkenntnisse zu erwerben, sondern auch unsere Problemlösungs- und Denkfähigkeiten verbessern. In diesem Artikel wird eine Roadmap zum Erlernen der C-Sprache im Detail vorgestellt, um Anfängern dabei zu helfen, ihren Lernprozess besser zu planen. 1. Grundlegende Grammatik lernen Bevor wir mit dem Erlernen der C-Sprache beginnen, müssen wir zunächst die grundlegenden Grammatikregeln der C-Sprache verstehen. Dazu gehören Variablen und Datentypen, Operatoren, Steueranweisungen (z. B. if-Anweisungen,
Unabhängigkeitserklärung für Python-Anwendungen: PyInstallers Weg zur Freiheit
Feb 20, 2024 am 09:27 AM
PyInstaller: Unabhängigkeit von Python-Anwendungen PyInstaller ist ein Open-Source-Python-Paketierungstool, das Python-Anwendungen und ihre Abhängigkeiten in eine unabhängige ausführbare Datei packt. Dieser Prozess beseitigt die Abhängigkeit vom Python-Interpreter und ermöglicht gleichzeitig die Ausführung von Anwendungen auf einer Vielzahl von Plattformen, einschließlich Windows, MacOS und Linux. Verpackungsprozess Der Verpackungsprozess von PyInstaller ist relativ einfach und umfasst die folgenden Schritte: pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile Option erstellt eine einzelne
