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!
