Beispiel für ein extrem schnelles Verpackungserlebnis ohne Konfiguration mit Parcel.js und Vue 2.x

Nach Browserify und Webpack wurde ein weiteres Paketierungstool namens Parcel.js geboren. Auf der offiziellen Website von Parcel.js wird dieses selbst als „Extrem schnelles, konfigurationsfreies Webanwendungspaketierungstool“ beschrieben. In diesem Artikel werden hauptsächlich die relevanten Informationen zum extrem schnellen Zero-Configuration-Packaging-Erlebnis von Parcel.js + Vue 2.x vorgestellt. Ich hoffe, dass es allen helfen kann.

Nach einem kurzen Kontakt ist es in Bezug auf die Effizienz zwar viel besser als Webpack, aber es gibt viele Fallstricke. Es sollte nach zukünftigen Upgrades 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 sein Verwendete npm- oder Garninstallation, ich persönlich verwende npm, dieser Blog wird basierend auf npm erklärt

Zuerst müssen Sie Parcel.js global installieren // Die aktuelle Version ist 1.3.0

npm install -g parcel-bundler

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

erstellt direkt das Projektverzeichnis, schreibt eine einfache traditionelle Seite

und öffnet sich dann Geben Sie in der Befehlszeile im Projektstammverzeichnis Tool den folgenden Befehl ein

parcel index.html -p 3030

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

-p im obigen Befehl wird für die Einstellungen der Portnummer verwendet. Wenn nicht festgelegt, wird Port 1234 standardmäßig gestartet

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

//css tatsächlich über src eingeführt, js kann nicht im laufenden Betrieb aktualisiert werden

Geben Sie nach Abschluss der Entwicklung den folgenden Befehl zum Verpacken ein

parcel build index.html

Nach dem Verpacken wird die dist Verzeichnis wird generiert

Qiaodou Sack, was ist das 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. Anwendung in modularen Projekten

Beginnen Sie mit dem Hauptfilm und verwandeln Sie zunächst das obige Projekt in ein modulares Projekt.

Erstellen Sie mit dem Befehl npm init -y ein Standardpaket.json und Ändern Sie die Start- und Verpackungsbefehle

Auf diese Weise können Sie das Projekt direkt über npm run dev starten. npm run build führt das zuvor global installierte Paket aus Es wird empfohlen, dem Projekt Abhängigkeiten hinzuzufügen

Das Obige ist eine traditionelle Seite, die über den Link eingeführt wird

npm install parcel-bundler -S

Da Sie es in ein modulares Projekt umwandeln möchten, müssen Sie es nur vorstellen a main.js, und führen Sie dann andere CSS- und JS-Dateien in main.js ein

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

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

npm install babel-preset-env -S

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

{
 "presets": ["env"]
}

Erstellen Sie eine .postcssrc-Datei:

npm install postcss-modules autoprefixer -S

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

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

den Code selbst zu ändern. Schließlich führt npm das Build-Paket aus

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

3. Verwendung von Parcel in Vue-Projekten

Das offizielle Dokument enthält eine Formel Geeignet für React-Projekte

Aber ich verwende normalerweise Vue, nachdem ich lange recherchiert habe, und habe schließlich die Methode gefunden

Verwende immer noch index.html als Eingang und verwende Skript, um main einzuführen. js:

Hier empfehlen wir ein sehr leistungsfähiges Plug-in-Parcel-Plugin-Vue, das es Parcel und Vue ermöglicht, erfolgreich zusammenzuarbeiten

<!-- 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)
})

Gekoppelt mit den zuvor erwähnten Babel- und Autoprefixer-Funktionen Das endgültige package.json sieht folgendermaßen aus:

Denken Sie unbedingt daran, die Dateien .postcssrc und .babelrc im Stammverzeichnis zu erstellen

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

Dann installiert npm install die Abhängigkeiten und führt npm aus dev startet das Projekt und npm run build packt das Projekt.

Verwandte Empfehlungen:

Detaillierte Beispiele für das Batch-Downloaden und Packen von Dateien in Vue

Webpack-Installation und grundlegende Verpackungsnutzung Detaillierte Erläuterung der Befehlsparameter

So packen Sie Vue-Projekte in statische Dateien

Das obige ist der detaillierte Inhalt vonBeispiel für ein extrem schnelles Verpackungserlebnis ohne Konfiguration mit Parcel.js und Vue 2.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!