So erreichen Sie eine extrem schnelle Zero-Configuration-Packung in Parcel.js + Vue 2.x

In diesem Artikel werden hauptsächlich relevante Informationen zum extrem schnellen Zero-Configuration-Packaging-Erlebnis von Parcel.js + Vue 2.x vorgestellt.

Parcel ist nach Browserify und Webpack ein weiteres Packtool Es stellte sich heraus, dass

Die offizielle Website von Parcel.js hat diese Selbstvorstellung als „Extrem schnelles, konfigurationsfreies Webanwendungs-Paketierungstool“

Nach einem kurzen Kontakt, in Bezug auf Effizienz, Es ist in der Tat besser als Webpack. Es gibt viele davon, aber es gibt auch viele Fallstricke. Nach zukünftigen Upgrades sollte es allmählich beliebter werden

Offizielle Dokumentation: https://parceljs.org/getting_started. html

Offizieller GitHub: https://github.com/parcel-bundler/parcel

1. Grundlegende Verwendung

Parcel kann mit npm oder Yarn installiert werden. Ich persönlich verwende npm.

Zuerst müssen Sie Parcel.js global installieren // Aktuelle Version 1.3.0

npm install -g parcel-bundler

Dann schreiben Sie eine Konfigurationsdatei ... Nein, das ist kein Webpack, das ist ein Paket ohne Konfigurationspaket

Erstellen Sie das Projektverzeichnis direkt, schreiben Sie eine einfache traditionelle Seite mit

, Öffnen Sie dann das Befehlszeilentool im Projektstammverzeichnis und geben Sie den folgenden Befehl ein:

parcel index.html -p 3030

Öffnen Sie dann http://localhost:3030/ im Browser, um die gerade entwickelte Seite zu öffnen

In Mit dem obigen Befehl -p wird die Portnummer festgelegt. Wenn nicht, wird standardmäßig Port 1234 gestartet

Parcel unterstützt Hot-Updates und überwacht Änderungen in HTML, CSS und JS und rendert sie sofort

// Tatsächlich können über src eingeführte CSS- und JS-Dateien nicht im laufenden Betrieb aktualisiert werden

Geben Sie nach Abschluss der Entwicklung den folgenden Befehl ein, um zu packen

parcel build index.html

Nach dem Packen das dist-Verzeichnis wird generiert

Qiaodou-Sack, was ist mit dem Paket? Warum gibt es immer noch so viele Dateien?

Keine Sorge, dies ist eine auf herkömmliche Weise geschriebene Seite. Sie enthält nicht einmal eine package.json. Wenn Sie sie als nächstes in ein modulares Projekt umwandeln, können Sie die Wirkung der Verpackung sehen

Okay, lassen Sie mich zuerst index.html manuell öffnen, um den Effekt zu sehen ... Moment ... warum wird das CSS nicht geladen?

Das liegt daran, dass die gepackten Pfade alle absolute Pfade sind, sodass es kein Problem ist, sie auf dem Server abzulegen. Wenn Sie sie lokal öffnen müssen, müssen Sie sie manuell in relative Pfade ändern

2, angewendet in modularen Projekten

Starten Sie das Hauptvideo und verwandeln Sie zunächst das obige Projekt in ein modulares Projekt

Erstellen Sie ein Standardpaket .json über den Befehl npm init -y und ändern Sie die Start- und Verpackungsbefehle

, sodass das Projekt direkt über npm run dev gestartet werden kann und npm run build das Paket ausführt In der Praxis ist es in der Praxis eher empfehlenswert, Abhängigkeiten im Projekt hinzuzufügen

npm install parcel-bundler -S

Das Obige ist eine traditionelle Seite, bei der das per Link eingeführte CSS verwendet wird

Da Sie transformieren möchten Um es in ein modulares Projekt zu integrieren, müssen Sie nur eine main.js einführen und dann in main.js andere CSS- und JS-Dateien einführen

Sie müssen also die ES6-Syntax wie Import verwenden und dann ein Babel installieren

npm install babel-preset-env -S

Erstellen Sie dann eine .babelrc-Datei im Stammverzeichnis und fügen Sie die folgende Konfiguration hinzu:

{
 "presets": ["env"]
}

Installieren Sie ein CSS-Konvertierungstool, z. B. Autoprefixer

npm install postcss-modules autoprefixer -S

Erstellen Sie eine .postcssrc-Datei :

{
 "modules": true,
 "plugins": {
 "autoprefixer": {
  "grid": true
 }
 }
}

Das offizielle Dokument empfiehlt auch ein Plug-in PostHTML, das HTML-Ressourcen kompiliert, aber hier besteht keine Notwendigkeit,

den Code vorerst selbst zu ändern

Paket

npm run build Sie können sehen, dass js und css integriert wurden und ihr Inhalt von babel und autoprefixer kompiliert wurde

3. Verwendung von Parcel in Vue-Projekten Das offizielle Dokument enthält eine Formel, die für Reaktionsprojekte geeignet ist

Aber ich verwende normalerweise Vue und recherchiere. Nach langer Zeit habe ich endlich einen Weg gefunden

Ich benutze ihn immer noch index.html als Eingang und Einführung von main.js mit Skript:

<!-- index.html -->
<body>
 <p id="app"></p>
 <script src="./src/main.js"></script>
</body>

// main.js

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./css/common.css&#39;

Vue.config.productionTip = false

const vm = new Vue({
 el: &#39;#app&#39;,
 router,
 render: h => h(App)
})

Hier möchte ich ein sehr leistungsstarkes Plug-in-Paket-Plugin-vue empfehlen, das Parcel und Vue erfolgreich vereinen lässt

In Verbindung mit babel und autoprefixer, die bereits erwähnt wurden, sieht die endgültige package.json wie folgt aus:

{
 "name": "ParcelVue",
 "version": "1.0.0",
 "description": "The project of parcel & vue created by Wise Wrong",
 "main": "main.js",
 "scripts": {
 "dev": "parcel index.html -p 3030",
 "build": "parcel build index.html"
 },
 "keywords": [
 "parcel",
 "vue"
 ],
 "author": "wisewrong",
 "license": "ISC",
 "devDependencies": {
 "autoprefixer": "^7.2.3",
 "babel-polyfill": "^6.26.0",
 "babel-preset-env": "^1.6.1",
 "parcel-bundler": "^1.3.0",
 "parcel-plugin-vue": "^1.4.0",
 "postcss-modules": "^1.1.0",
 "vue-loader": "^13.6.1",
 "vue-style-loader": "^3.0.3",
 "vue-template-compiler": "^2.5.13"
 },
 "dependencies": {
 "vue": "^2.5.13",
 "vue-router": "^3.0.1"
 }
}

Denken Sie daran, .postcssrc und .babelrc im Stammverzeichnis File

zu erstellen und dann npm install, um Abhängigkeiten zu installieren, npm run dev, um das Projekt zu starten, npm run build, um das Projekt zu packen

Das Obige habe ich für Sie zusammengestellt, ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Hintergrundbild in Vue festlegen

So lösen Sie das Problem eines ungültigen statischen Ressourcenbilds nach der Vue-Verpackung

So stellen Sie Vue-Router und Express-Projekte auf dem Server bereit

Lösung für lokale 404-Anfrage mit Axios + Express unter Vue 2.5.2

Verwenden Sie Vue und reagieren Sie, um Expansions- und Kollapseffekte zu erzielen

So implementieren Sie die Optimierung der Webpack-Verpackung in Vue

Detaillierte Erläuterung des Vue-Codierungsstils

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine extrem schnelle Zero-Configuration-Packung in Parcel.js + Vue 2.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!