Parcel.js + Vue 2.x Ultrarapid Zero-Configuration Packaging Tutorial

Nach Browserify, Webpack ist noch ein Packaging-Tool namens Parcel erschienen

Die offizielle Website von Parcel.js hat eine solche Selbstvorstellung: "Ein schnelles Zero-Configuration-Web-Anwendungs-Packaging-Tool"

Nach einem kurzen Einstieg, allein von der Effizienz her, ist es tatsächlich viel effizienter als webpack, aber es gibt auch viele Fallstricke, nach zukünftigen Updates sollte es allmählich verbreitet werden

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

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

一、基本用法

Parcel kann mit npm oder yarn installiert werden, ich bevorzuge npm, dieses Blog wird auf npm basieren

首先需要全局安装 Parcel.js　　　 // 当前版本 1.3.0

npm install -g parcel-bundler

Dann schreiben Sie eine Konfigurationsdatei... Nein, das ist nicht webpack, das ist parcel, Zero-Configuration-Packing

Erstellen Sie direkt den Projektverzeichnis, schreiben Sie eine einfache traditionelle Seite

Öffnen Sie dann das Kommandozeilenwerkzeug im Projektstammverzeichnis und geben Sie folgenden Befehl ein

parcel index.html -p 3030

Öffnen Sie dann im Browser http://localhost:3030/ können Sie die gerade entwickelte Seite öffnen

Im obigen Befehl -p wird verwendet, um den Port zu setzen, wenn nicht eingestellt, wird standardmäßig gestartet 1234 Port

Parcel unterstützt das Hot-Update und überwacht die Änderungen an html, css und js und rendernt sie sofort

// Tatsächlich können durch src eingefügte css und js nicht aktualisiert werden

Nachdem die Entwicklung abgeschlossen ist, geben Sie die folgenden Befehle ein, um zu packen

parcel build index.html

Nach dem Packen wird ein dist-Verzeichnis erstellt

Huhu, wo ist das Packen? Warum gibt es immer noch so viele Dateien?

Ruhe, das ist eine Seite, die mit traditioneller Schreibweise geschrieben wurde, und es gibt auch kein package.json, also wird das Projekt in ein modulares Projekt umgewandelt, um das Packergebnis zu sehen

Na gut, ich öffne erstmal manuell index.html und sehe das Ergebnis... warten... warum wird das css nicht geladen?

Das liegt daran, dass die Pfade nach dem Packen absolute Pfade sind, die auf dem Server kein Problem darstellen, wenn Sie sie lokal öffnen möchten, müssen Sie sie manuell in relative Pfade ändern

Zwei, Anwendung in modularen Projekten

Die eigentliche Geschichte beginnt, zunächst wird das obige Projekt in ein modulares Projekt umgewandelt

Durch npm init -Mit dem y-Befehl wird ein Standard package.json erstellt und die Start- und Packbefehle geändert

So können Sie das Projekt direkt mit npm run dev starten und mit npm run build packen

Bisher wurde parcel global installiert, im praktischen Einsatz wird empfohlen, die Abhängigkeit im Projekt hinzuzufügen

npm install parcel-bundler -S

Das ist eine traditionelle Seite, die css mit link einbindet

Da das Projekt modularisiert werden soll, müssen Sie nur einen main.js einbinden und dann andere css- und js-Dateien im main.js einbinden

Daher ist die Verwendung von import und anderen ES erforderlich6 Wenn es um Syntax geht, installieren Sie einfach einen babel

npm install babel-preset-env -S

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

{
 "presets": ["env"]
}

Installieren Sie einen weiteren CSS-Konvertierungstool, wie z.B. autoprefixer

npm install postcss-modules autoprefixer -S

Erstellen Sie die Datei .postcssrc:

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

Die offizielle Dokumentation empfiehlt auch ein Plugin zum Kompilieren von html-Ressourcen, PostHTML, aber es ist hier vorläufig nicht erforderlich

Verändern Sie den Code selbst und paketieren Sie ihn schließlich mit npm run build

Man kann sehen, dass js und css integriert sind und ihre Inhalte auch durch babel und autoprefixer kompiliert wurden

Drittes Kapitel: Verwendung von Parcel in Vue-Projekten

Die offizielle Dokumentation gibt ein Rezept für React-Projekte an

Ich verwende jedoch oft vue, habe lange geforscht und endlich eine Methode gefunden

Der Eingang wird immer noch mit index.html verwendet, main.js wird durch script eingebunden:

<!-- index.html -->
<body>
 <div id="app"></div>
 <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 mächtiges Plugin empfohlen, Parcel-plugin-vue, das parcel und vue erfolgreich zusammenbringt

Zusätzlich zu den zuvor erwähnten babel und autoprefixer, sieht das finale package.json so aus:

{
 "name": "ParcelVue",
 "version": "1.0.0",
 "description": "Das Projekt von parcel & vue, erstellt von 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"
 }
}

Vergessen Sie nicht, die Dateien .postcssrc und .babelrc im Stammverzeichnis zu erstellen

Dann installieren Sie Abhängigkeiten mit npm install, starten Sie das Projekt mit npm run dev und bündeln Sie das Projekt mit npm run build

Zusammenfassung

Das oben Gesagte ist das, was der Redakteur den Lesern vorgestellt hat, Parcel.js + Vue 2.x Schnellstart-Tutorial mit Null-Konfiguration, hoffentlich hilfreich für alle, falls es hilfreich ist.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig und selbstständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Urheberrechtsinhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, und geben Sie relevante Beweise an. Sobald die Anschuldigung nachgewiesen wird, wird die Website den fraglichen Inhalt sofort löschen.)