Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des Beispiels einer Paketverpackung

Ausführliche Erläuterung des Beispiels einer Paketverpackung

小云云Original: 2018-01-16 13:20:222384Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nachahmung der Taobao JSsearch-Suche mit detaillierter Nutzungsanalyse im Dropdown-MenüNächster Artikel：Nachahmung der Taobao JSsearch-Suche mit detaillierter Nutzungsanalyse im Dropdown-Menü

In Verbindung stehende Artikel

Mehr sehen