Heim > Artikel > Web-Frontend > Detaillierte Erklärung, wie Vue Verpackungstools konfiguriert
Detaillierte Erklärung, wie Vue Verpackungstools konfiguriert
- 亚连Original
- 2018-06-11 17:31:272650Durchsuche
In diesem Artikel wird hauptsächlich die detaillierte Erklärung des schnellen Zero-Configuration-Packaging-Tools von Vue vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.
In diesem Artikel wird das schnelle Zero-Configuration-Packaging-Tool von Vue vorgestellt und mit allen geteilt. Die Details sind wie folgt:
Funktionen
Schnelle Verpackung
Alle Ressourcen packen
Automatische Konvertierung
Code Aufteilen
Modul Hot Replacement
Freundliche Fehlerprotokollierung
Wie es funktioniert
Parcel wandelt Ressourcenbäume in Bündelbäume um. Viele andere Verpackungstools basieren grundsätzlich auf JavaScript-Ressourcen, an die Ressourcen in anderen Formaten angehängt sind. Zum Beispiel inline in einen String in einer JS-Datei. Parcel ist dateitypunabhängig, kann mit jeder Art von Ressource wie erwartet arbeiten und erfordert keine Konfiguration.
Ressourcenbaum erstellen
Parcel akzeptiert eine einzelne Eintragsressource als Eingabe, die von jedem Typ sein kann: JS, HTML, CSS, Bilddateien usw. In Parcel sind viele verschiedene Ressourcentypen definiert, die mit bestimmten Dateitypen umgehen können. Ressourcen werden analysiert, Ressourcenabhängigkeiten werden extrahiert und Ressourcen werden in die endgültige kompilierte Form konvertiert. Dieser Prozess erstellt einen Ressourcenbaum.
Erstellen des Dateibündelbaums
Sobald der Ressourcenbaum erstellt ist, werden die Ressourcen im Dateibündelbaum platziert. Zuerst wird eine Eintragsressource in einem Dateibündel erstellt, und dann wird dynamisches import() in einem Unterdateibündel erstellt, was die Codeaufteilung auslöst. Wenn Dateiressourcen unterschiedlichen Typs eingeführt werden, werden gleichgeordnete Dateipakete erstellt. Wenn Sie beispielsweise eine CSS-Datei in JavaScript einführen, wird diese in einem Geschwisterdateibündel abgelegt, das der JavaScript-Datei entspricht. Wenn eine Ressource von mehr als einem Bundle referenziert wird, wird sie zum nächsten gemeinsamen Vorfahren im Bundle-Baum hochgestuft, sodass die Ressource nicht mehrfach gepackt wird.
Paketierung
Nachdem der Dateibündelbaum erstellt wurde, wird jedes Dateibündel vom Paketierer in eine Datei eines bestimmten Dateityps geschrieben. Paketierer wissen, wie sie den Code jeder Ressource in einer Datei kombinieren, die letztendlich vom Browser geladen wird.
Konfiguration
Initialisierungsprojekt
npm install -g parcel mkdir xxx && cd xxx && npm init -y
Konvertierung
Babel
npm install babel-preset-env --save-dev
Root-Verzeichnis Configuration.babelrc
{
"presets": ["env"]
}PostCSS
npm install postcss-modules autoprefixer --save-dev
Stammverzeichnis Configuration.postcssrc
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}Support vue
npm install parcel-plugin-vue --save-dev
Eintrag hinzufügen
import App from './App.vue'
import router from './router/index.js'
import './assets/js/rem.js'
window.onload = () => {
const vm = new Vue({
el: '#app',
router,
render: h => h(App)
})
}Configuration index.html
<body> <p id="app"></p> <script src="入口文件"></script> </body>
Routing konfigurieren (Code-Splitting-Lazy Loading)
{
path: 'home',
component: () =>import('../pages/home.vue')
}import() gibt ein Versprechen zurück, sodass Sie auch die Async/Await-Syntax verwenden können, wenn Sie die Async/Await-Syntax lokal verwenden möchten. Bitte stellen Sie babel vor -polyfill
Um zwischen Produktionsumgebung und Entwicklungsumgebung zu unterscheiden, konfigurieren Sie package.json.
dev --- Entwicklungsumgebung
build --- Produktionsumgebung
"scripts": {
"dev": "parcel index.html -p 3700",
"build": "parcel build index.html"
} Fertig
Besuchen Sie http://localhost:3700/home
Diese Demo wird durch Vue + Parcel + Grid +Stylus vervollständigt: Parcel - vue
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So erhalten Sie den Wert in „select“ in vue.js (ausführliches Tutorial)
So erhalten Sie ihn Vue Verwenden von Slots zum Verteilen von Inhalten über Slots
So kapseln Sie wiederverwendbare Komponenten in Vue
So beurteilen Sie Datums- und Zeitunterschiede in JavaScript
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue Verpackungstools konfiguriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!