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

So verpacken Sie mit Parcel

亚连

Freigeben： 2018-06-11 17:26:44

Original

1969 Leute haben es durchsucht

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!