Detaillierte Erklärung, wie Vue Verpackungstools konfiguriert-js-Tutorial-php.cn

Detaillierte Erklärung, wie Vue Verpackungstools konfiguriert

亚连

Freigeben： 2018-06-11 17:31:27

Original

2742 Leute haben es durchsucht

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

Nach dem Login kopieren

Konvertierung

Babel

npm install babel-preset-env --save-dev

Nach dem Login kopieren

Root-Verzeichnis Configuration.babelrc

 {
  "presets": ["env"]
 }

Nach dem Login kopieren

PostCSS

npm install postcss-modules autoprefixer --save-dev

Nach dem Login kopieren

Stammverzeichnis Configuration.postcssrc

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

Nach dem Login kopieren

Support vue

npm install parcel-plugin-vue --save-dev

Nach dem Login kopieren

Eintrag hinzufügen

 import App from &#39;./App.vue&#39;
 import router from &#39;./router/index.js&#39;
 import &#39;./assets/js/rem.js&#39;
 window.onload = () => {
  const vm = new Vue({
   el: &#39;#app&#39;,
   router,
   render: h => h(App)
  })
 }

Nach dem Login kopieren

Configuration index.html

 <body>
  <p id="app"></p>
  <script src="入口文件"></script>
 </body>

Nach dem Login kopieren

Routing konfigurieren (Code-Splitting-Lazy Loading)

 {
   path: &#39;home&#39;,
   component: () =>import(&#39;../pages/home.vue&#39;)
 }

Nach dem Login kopieren

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

Nach dem Login kopieren

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!