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
Paketnpm 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 'babel-polyfill' import Vue from 'vue' import App from './App.vue' import router from './router' import './css/common.css' Vue.config.productionTip = false const vm = new Vue({ el: '#app', 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 festlegenSo lösen Sie das Problem eines ungültigen statischen Ressourcenbilds nach der Vue-VerpackungSo stellen Sie Vue-Router und Express-Projekte auf dem Server bereitLösung für lokale 404-Anfrage mit Axios + Express unter Vue 2.5.2Verwenden Sie Vue und reagieren Sie, um Expansions- und Kollapseffekte zu erzielenSo implementieren Sie die Optimierung der Webpack-Verpackung in VueDetaillierte Erläuterung des Vue-CodierungsstilsDas 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!