Heim > Artikel > Web-Frontend > So verpacken Sie mit Parcel

So verpacken Sie mit Parcel

亚连Original: 2018-06-11 17:26:441908Durchsuche

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

1. Initialisieren Sie npm

yarn init -y

oder

npm init -y

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

2. React hinzufügen

yarn:

yarn add react react-dom

npm:

npm install react react-dom --save

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

3. Babel hinzufügen

Neue .babelrc-Datei

touch .babelrc

Eingabeinhalt:

{
 "presets": ["react"]
}

babel-preset-react hinzufügen:

Garn:

yarn add babel-preset-react -D

npm :

npm install babel-preset-react --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"
+  }
 }

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

9. Abschließen

Führen Sie

yarn start

oder

npm start

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

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!

node.js json css easyui html npm postcss yarn JS github git http https

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：Ausführliche Antwort: Welche Auswirkungen haben Änderungen in Vue auf Komponenten?Nächster Artikel：Ausführliche Antwort: Welche Auswirkungen haben Änderungen in Vue auf Komponenten?

In Verbindung stehende Artikel

Mehr sehen