suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung, wie Vue Verpackungstools konfiguriert

Detaillierte Erklärung, wie Vue Verpackungstools konfiguriert

亚连
亚连Original
2018-06-11 17:31:272712Durchsuche

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

  1. Schnelle Verpackung

  2. Alle Ressourcen packen

  3. Automatische Konvertierung

  4. Code Aufteilen

  5. Modul Hot Replacement

  6. 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: &#39;home&#39;,
   component: () =>import(&#39;../pages/home.vue&#39;)
 }

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

So ändern Sie den Props-Wert in der untergeordneten vue2.0-Komponente und übergeben den Wert an die übergeordnete Komponente

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!

JavaScript json css vue.js stylus html 封装 select 字符串 JS promise http
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verpacken Sie mit ParcelNächster Artikel：So verpacken Sie mit Parcel

In Verbindung stehende Artikel

Mehr sehen