So verpacken Sie mit Parcel-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So verpacken Sie mit Parcel

亚连

Jun 11, 2018 pm 05:26 PM

react 打包

In diesem Artikel wird hauptsächlich das Paketverpackungsbeispiel (React HelloWorld) vorgestellt und die Eigenschaften und Verwendungsbeispiele von Paketverpackungen im Detail vorgestellt. Interessierte können sich über

Paketverpackungsfunktionen

Extrem schnelle Paketierungszeit

Parcel nutzt 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

Nach dem Login kopieren

1. Initialisieren Sie npm

yarn init -y

Nach dem Login kopieren

oder

npm init -y

Nach dem Login kopieren

. Zu diesem Zeitpunkt wird die Datei package.json erstellt:

{
 "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"
}

Nach dem Login kopieren

2. React hinzufügen

yarn:

yarn add react react-dom

Nach dem Login kopieren

npm:

npm install react react-dom --save

Nach dem Login kopieren

package.json Dateiinhalt:

 {
  "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"
+ }
 }

Nach dem Login kopieren

3. Babel hinzufügen

Neue .babelrc-Datei

touch .babelrc

Nach dem Login kopieren

Eingabeinhalt:

{
 "presets": ["react"]
}

Nach dem Login kopieren

babel-preset-react hinzufügen:

Garn:

yarn add babel-preset-react -D

Nach dem Login kopieren

npm :

npm install babel-preset-react --D

Nach dem Login kopieren

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"
+  }
 }

Nach dem Login kopieren

5. Paket hinzufügen

Garn :

yarn add parcel-bundler -D

Nach dem Login kopieren

npm:

npm install parcel-bundler --D

Nach dem Login kopieren

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"  
  }
 }

Nach dem Login kopieren

6. Erstellen Sie eine neue index.html-Datei

Inhalt

<html>
<body>
  <p id="root"></p>
  <script src="./index.js"></script>
</body>
</html>

Nach dem Login kopieren

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"));

Nach dem Login kopieren

8. Fügen Sie einen Verpackungsbefehl hinzu

 {
  "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"  
  }
 }

Nach dem Login kopieren

9. Abschließen

Führen Sie

yarn start

Nach dem Login kopieren

oder

npm start

Nach dem Login kopieren

aus und öffnen Sie http://localhost:1234 im Browser

Der Verpackungsprozess erzeugt zwei Verzeichnisse, .cache und dist. Für Git-Projekte können Sie eine neue .gitignore-Datei erstellen und diese beiden Verzeichnisse ignorieren:

.cache
dist
node_modules

Nach dem Login kopieren

Das Obige ist, was ich für alle kompiliert habe . Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Funktion zum Zuschneiden und Hochladen von Bildern von Vue über js in Cropper

Es gibt Mutationen und Aktionen in Vuex Was ist der Unterschied? (Detailliertes Tutorial)

So implementieren Sie das Zuschneiden von Bildern und das Hochladen von Serverfunktionen in Vue

So lösen Sie die tatsächliche Kompatibilität von Easyui-Datum und -Uhrzeit box ie Frage (ausführliches Tutorial)

Erläutern Sie ausführlich die praktischen Fähigkeiten in Immutable und React

Wie Sie Readline in Node.js verwenden Erzielen Sie zeilenweises Lesen und Schreiben von Dateiinhalten

Das obige ist der detaillierte Inhalt vonSo verpacken Sie mit Parcel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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

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

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

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

Wo ist der Login-Zugang für Gmail-E-Mail?

7475

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket Sep 26, 2023 pm 07:46 PM

So erstellen Sie eine Echtzeit-Chat-Anwendung mit React und WebSocket Einführung: Mit der rasanten Entwicklung des Internets hat die Echtzeitkommunikation immer mehr Aufmerksamkeit auf sich gezogen. Live-Chat-Apps sind aus dem modernen Sozial- und Arbeitsleben nicht mehr wegzudenken. In diesem Artikel wird erläutert, wie Sie mit React und WebSocket eine einfache Echtzeit-Chat-Anwendung erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. Technische Vorbereitung Bevor wir mit der Erstellung einer Echtzeit-Chat-Anwendung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten: React: eine zum Erstellen

Leitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End Sep 28, 2023 am 10:48 AM

React-Leitfaden zur Front-End- und Back-End-Trennung: So erreichen Sie die Front-End- und Back-End-Entkopplung und die unabhängige Bereitstellung. Es sind spezifische Codebeispiele erforderlich. In der heutigen Webentwicklungsumgebung ist die Front-End- und Back-End-Trennung zu einem Trend geworden. Durch die Trennung von Front-End- und Back-End-Code kann die Entwicklungsarbeit flexibler und effizienter gestaltet und die Zusammenarbeit im Team erleichtert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von React eine Front-End- und Back-End-Trennung erreichen und so die Ziele der Entkopplung und unabhängigen Bereitstellung erreichen. Zuerst müssen wir verstehen, was Front-End- und Back-End-Trennung ist. Im traditionellen Webentwicklungsmodell sind Front-End und Back-End gekoppelt

So erstellen Sie einfache und benutzerfreundliche Webanwendungen mit React und Flask Sep 27, 2023 am 11:09 AM

So erstellen Sie mit React und Flask einfache und benutzerfreundliche Webanwendungen. Einführung: Mit der Entwicklung des Internets werden die Anforderungen an Webanwendungen immer vielfältiger und komplexer. Um den Anforderungen der Benutzer an Benutzerfreundlichkeit und Leistung gerecht zu werden, wird es immer wichtiger, moderne Technologie-Stacks zum Aufbau von Netzwerkanwendungen zu verwenden. React und Flask sind zwei sehr beliebte Frameworks für die Front-End- und Back-End-Entwicklung, und sie arbeiten gut zusammen, um einfache und benutzerfreundliche Webanwendungen zu erstellen. In diesem Artikel erfahren Sie, wie Sie React und Flask nutzen

Teilen Sie eine einfache Möglichkeit zum Paketieren von PyCharm-Projekten Dec 30, 2023 am 09:34 AM

Teilen Sie die einfache und leicht verständliche PyCharm-Projektpaketierungsmethode. Mit der Popularität von Python verwenden immer mehr Entwickler PyCharm als Hauptwerkzeug für die Python-Entwicklung. PyCharm ist eine leistungsstarke integrierte Entwicklungsumgebung, die viele praktische Funktionen bietet, die uns helfen, die Entwicklungseffizienz zu verbessern. Eine der wichtigen Funktionen ist die Projektverpackung. In diesem Artikel wird auf einfache und leicht verständliche Weise vorgestellt, wie Projekte in PyCharm verpackt werden, und es werden spezifische Codebeispiele bereitgestellt. Warum Paketprojekte? Entwickelt in Python

So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ Sep 28, 2023 pm 08:24 PM

So erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ Einführung: Moderne Anwendungen müssen zuverlässiges Messaging unterstützen, um Funktionen wie Echtzeitaktualisierungen und Datensynchronisierung zu erreichen. React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, während RabbitMQ eine zuverlässige Messaging-Middleware ist. In diesem Artikel wird erläutert, wie Sie React und RabbitMQ kombinieren, um eine zuverlässige Messaging-Anwendung zu erstellen, und es werden spezifische Codebeispiele bereitgestellt. RabbitMQ-Übersicht:

React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Sep 29, 2023 pm 05:45 PM

ReactRouter-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Mit der Popularität von Single-Page-Anwendungen ist das Front-End-Routing zu einem wichtigen Bestandteil geworden, der nicht ignoriert werden kann. Als beliebteste Routing-Bibliothek im React-Ökosystem bietet ReactRouter umfangreiche Funktionen und benutzerfreundliche APIs, wodurch die Implementierung des Front-End-Routings sehr einfach und flexibel ist. In diesem Artikel wird die Verwendung von ReactRouter vorgestellt und einige spezifische Codebeispiele bereitgestellt. Um ReactRouter zuerst zu installieren, benötigen wir

So erstellen Sie eine schnelle Datenanalyseanwendung mit React und Google BigQuery Sep 26, 2023 pm 06:12 PM

So verwenden Sie React und Google BigQuery zum Erstellen schneller Datenanalyseanwendungen. Einführung: Im heutigen Zeitalter der Informationsexplosion ist die Datenanalyse zu einem unverzichtbaren Bindeglied in verschiedenen Branchen geworden. Unter anderem ist die Entwicklung schneller und effizienter Datenanalyseanwendungen für viele Unternehmen und Einzelpersonen zum Ziel geworden. In diesem Artikel wird erläutert, wie Sie mit React und Google BigQuery eine schnelle Datenanalyseanwendung erstellen, und es werden detaillierte Codebeispiele bereitgestellt. 1. Übersicht React ist ein Werkzeug zum Erstellen

So erstellen Sie Echtzeit-Datenverarbeitungsanwendungen mit React und Apache Kafka Sep 27, 2023 pm 02:25 PM

So verwenden Sie React und Apache Kafka zum Erstellen von Echtzeit-Datenverarbeitungsanwendungen. Einführung: Mit dem Aufkommen von Big Data und Echtzeit-Datenverarbeitung ist die Erstellung von Echtzeit-Datenverarbeitungsanwendungen für viele Entwickler zum Ziel geworden. Die Kombination von React, einem beliebten Front-End-Framework, und Apache Kafka, einem leistungsstarken verteilten Messaging-System, kann uns beim Aufbau von Echtzeit-Datenverarbeitungsanwendungen helfen. In diesem Artikel wird erläutert, wie Sie mit React und Apache Kafka Echtzeit-Datenverarbeitungsanwendungen erstellen

See all articles