Eine modulare Anwendung mit Webpack und VueJs erstellen

Erstellen Sie eine modulare Anwendung mit Webpack und VueJs mithilfe dieses Beitrags. VueJs ist heutzutage wegen seiner Einfachheit, seiner ausgezeichneten Anleitung und der lebendigen Community ein sehr beliebtes Frontend-Framework. Es ist gut geeignet, um Webanwendungen zu schreiben, die Anfragen an ein Backend wie eine REST-API stellen. Aber manchmal möchten wir gerne Funktionen in eine bestehende Website integrieren. Und wir wollen es nach und nach tun, sagen wir, zuerst das Suchformular, dann irgendein Bedienelement auf der Startseite und so weiter und so fort. In diesem Fall müssen wir ein zusätzliches Tool, Webpack, verwenden. Das Erstellen einer modularen Webpack-Anwendung ist einfach. Es hilft uns, unseren Code in Module zu zerlegen und Code-Bündel für jedes Modul zu bilden. Auf diese Weise können wir unsere Module separat in unsere Website aufnehmen, wo wir sie benötigen.

Zur Veranschaulichung leite ich Sie Schritt für Schritt an, indem ich eine Demo-Anwendung schreibe.

Anforderungen

• VueJs-Grundkenntnisse
• Terminal-Grundkenntnisse

Installieren von Vue CLI

Zunächst müssen wir das Vue-CLI-Paket global installieren, das uns durch die Projekterstellung und -konfiguration führt:

$ yarn global add @vue/cli

Weitere Informationen zu Vue CLI finden Sie in der zugehörigen Anleitung: https://cli.vuejs.org/guide/installation.html

Erstellen des Vue-Projekts

Wir werden Vue CLI verwenden, folglich wird es einfacher sein, unser Projekt zu erstellen:

$ vue create demo-app

Der Assistent wird ausgeführt und bittet uns, unsere Einstellungen auszuwählen. Für diese Demo-Version habe ich einen sehr einfachen Aufbau gewählt.

Wenn Sie aufgefordert werden, eine Voreinstellung auszuwählen, wählen Sie „Features manuell auswählen“:

Wählen Sie Babel, Typescript, CSS Preprocessors und Linter/Formatter.

Wählen Sie dann die folgenden Einstellungen:

Use class-style component syntax? Yes
Use Babel alongside TypeScript for auto-detected polyfills? Yes
CSS pre-processor: Sass/SCSS (with node-sass)
Linter / formatter config: Airbnb
Additional lint features: Lint on save
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
Save this as a preset for future projects? No

Anschließend wird das Projekt mit den von uns gewählten Einstellungen erstellt.

Führen Sie unser brandneues VueJs-Projekt aus und testen Sie es

Gehen Sie zum Projektordner:

$ cd demo-app

$ ~/demo-app> yarn serve

Wenn alles gut gelaufen ist, können Sie jetzt unsere Demo-Version mit der URL http://localhost:8080/  aufrufen. Viel Erfolg!

Webpack zum Projekt hinzufügen

Zuerst stoppen wir den lokalen Server mit Ctrl + C und dann verwenden wir Yarn, um die Abhängigkeiten hinzuzufügen:

$ ~/demo-app> yarn add webpack webpack-cli

Zwei Module erstellen

Dazu müssen wir unsere Ordnerstruktur etwas ändern. Bei der Projekterstellung erhalten wir standardmäßig einen Boilerplate-Code, der wie folgt aussieht:

Als erstes bereinigen wir den src-Ordner, indem wir die folgenden Befehle ausführen:

$ ~/demo-app> rm ./src/components/ -r

$ ~/demo-app> rm /src/App.vue

$ ~/demo-app> rm /src/main.ts

Als nächstes erstellen wir innerhalb von /src einen neuen Ordner namens „Module“:

$ ~/demo-app> mkdir ./src/modules

Das ist der Ort, an dem sich dann der Code unserer Module befindet. Dies ist der Code für unsere Demo-Module:

Modul 1: Greeting

import Vue from 'vue';
import Greeting from './Greeting.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(Greeting),
}).$mount('#greeting');

<template>
  <div id="greeting-module">
    <b>This is my greeting:</b>
    <hello-world></hello-world>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import HelloWorld from '@/modules/greeting/components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class Greeting extends Vue {}
</script>

<style scoped>
</style>

<template>
  <div class="hello-world">
    <h1>Hello</h1>
    <p>
      world!
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<style scoped lang="scss">
</style>

Modul 2: SearchForm

import Vue from 'vue';
import SearchForm from './SearchForm.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(SearchForm),
}).$mount('#searchForm');

<template>
  <div id="search-form-module">
    <search-input></search-input>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import SearchInput from '@/modules/search-form/components/SearchInput.vue';

@Component({
  components: {
    SearchInput,
  },
})
export default class Greeting extends Vue {}
</script>

<style scoped>
</style>

<template>
  <div class="search-input">
    <b>Search:</b>
    <p>
      <input type="search" name="criteria" />
      <button type="submit">search</button>
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class SearchInput extends Vue {}
</script>

 

Die modulare Anwendung mit Webpack ist fast fertig. Fügen Sie einfach die Konfiguration hinzu.

Wir müssen eine Datei namens vue.config.js erstellen:

$ ~/demo-app> touch vue.config.js

Als nächstes fügen wir zwei Seiten zu unserer Konfiguration hinzu, eine pro Modul. So können wir unser Projekt ausführen und testen:

module.exports = {
  filenameHashing: false,
  pages: {
    greeting: {
      entry: <code>${__dirname}/src/modules/greeting/main.ts</code>,
      template: <code>${__dirname}/public/greeting.html</code>,
      filename: 'greeting.html',
      title: 'Demo - Greeting',
    },
    'search-form': {
      entry: <code>${__dirname}/src/modules/search-form/main.ts</code>,
      template: <code>${__dirname}/public/search-form.html</code>,
      filename: 'search-form.html',
      title: 'Demo - Search Form',
    },
  },
};

Wie Sie im Codeblock sehen können, deaktivieren wir das Dateinamen-Hashing für unsere Demo-Version (Zeile 2). Und wir verweisen auf eine Vorlagendatei für jede unserer Seiten (Zeilen 6 und 12).

Erstellen wir nun unsere Seitenvorlagen, damit wir keine Dateifehler übersehen. Sie können die Vorlage aus der vorhandenen Datei ./public/index.html kopieren:

$ ~/demo-app> cp ./public/index.html ./public/greeting.html

$ ~/demo-app> cp ./public/index.html ./public/search-form.html

Dann müssen wir die IDs des Ziel-HTML-Elements ändern. Die ID sollte mit der ID übereinstimmen, die in der Datei main.ts jedes Moduls definiert wurde:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>demo-app</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but demo-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="greeting"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>demo-app</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but demo-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="searchForm"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Danach brauchen wir die Datei ./public/index.html nicht mehr, also fahren wir fort und löschen sie:

$ ~/demo-app> rm ./public/index.html

Nun sind wir bereit, unsere Demo-App zu testen. Wir können unseren Dev-Server noch einmal ausführen:

$ ~/demo-app> yarn serve

Wenn wir zu der Adresse http://localhost:8080/ gehen, erhalten wir den Fehler 404 Cannot GET /. Das liegt daran, dass unsere Demo-App nicht mehr nur einen Einstiegspunkt hat, sondern zwei! Nun können wir also über die zuvor konfigurierten Seiten auf jedes unserer Module einzeln zugreifen:

http://localhost:8080/greeting.html

http://localhost:8080/search-form.html

Hurra! Unsere beiden Module leben.

Anwendung aufbauen

Es ist an der Zeit, unsere Module zu verwenden, vielleicht in einer bereits bestehenden Anwendung. Bauen wir also die Demo-Anwendung auf, um die Dateien zu erstellen, die einbezogen werden sollen:

Stoppen Sie zunächst den Dev-Server (Sie können Strg+c verwenden).

Führen Sie dann diesen Befehl aus:

$ ~/demo-app> yarn build

Sobald der Build abgeschlossen ist, erhalten wir diesen Output:

Alle Build-Dateien werden standardmäßig im Ordner ./dist erstellt.

dist/js/chunk-vendors.js ist der gemeinsame Code für beide Module. Dieser enthält VueJs und alle Abhängigkeiten, die für deren Betrieb erforderlich sind. Er sollte auf jeder Seite enthalten sein, auf der wir eines unserer Module verwenden wollen.

dist/js/greeting.js ist die Datei, die den Code für das Greeting-Modul enthält, und sollte auf jeder Seite enthalten sein, auf der wir sie verwenden wollen. Außerdem sollte die Seite, auf der sie enthalten ist, ein Element mit der ID „greeting“ enthalten.

dist/js/search-form.js ist die Datei, die den Code für das Search-Form-Modul enthält, und sollte auf jeder Seite enthalten sein, auf der wir sie verwenden wollen. Außerdem sollte die Seite, auf der sie enthalten ist, ein Element mit der ID „search-form“ enthalten.

Weitere Überlegungen

• Verwenden Sie die Versionskontrolle für Ihre JS-Dateien, um den Browser-Cache zu bereinigen, sobald eine neue Version Ihres Moduls veröffentlicht wird.
• Erstellen Sie ein Kernmodul, um die Ressourcen zu platzieren, die von allen Modulen gemeinsam genutzt werden.
• Implementieren Sie für jedes Modul eine individuelle Routing- und Speicherverwaltung.

Den funktionierenden Code für diese Demo-App finden Sie hier:

https://github.com/KiweeEu/vue-modular-app-demo

 

• JavaScript
• VueJs