Heim > Java > javaLernprogramm > Hauptteil

Verwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen

王林
Freigeben: 2023-06-22 09:13:59
Original
1352 Leute haben es durchsucht

Da die Komplexität moderner Webanwendungen immer weiter zunimmt, wird der Aufbau exzellenter Front-End-Engineering- und Plug-in-Systeme immer wichtiger. Mit der Popularität von Spring Boot und Webpack sind sie zu einer perfekten Kombination für die Erstellung von Front-End-Projekten und Plug-in-Systemen geworden.

Spring Boot ist ein Java-Framework, das Java-Anwendungen mit minimalen Konfigurationsanforderungen erstellt. Es bietet viele nützliche Funktionen, wie z. B. die automatische Konfiguration, sodass Entwickler Webanwendungen schneller und einfacher erstellen und bereitstellen können.

Webpack ist ein Front-End-Build-Tool basierend auf Node.js. Es kann verschiedene Sprachen und Frameworks in einem minimalen Satz statischer Ressourcen kompilieren, verpacken und optimieren.

Im Folgenden werde ich vorstellen, wie man Spring Boot und Webpack zum Erstellen von Front-End-Projekten und Plug-In-Systemen verwendet.

  1. Erstellen Sie ein Spring Boot-Projekt

Zuerst müssen wir ein Spring Boot-Projekt erstellen. Sie können Spring Initializr verwenden oder es direkt in der IDE erstellen.

Beim Erstellen des Projekts müssen wir Web als Abhängigkeit auswählen und einige gängige Plug-Ins hinzufügen, wie z. B. Spring Boot DevTools und Lombok.

  1. Webpack-Konfiguration hinzufügen

Jetzt müssen wir die Webpack-Konfiguration für unsere Spring Boot-Anwendung hinzufügen. Wir können eine Datei namens webpack.config.js erstellen und darin den folgenden Code hinzufügen:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main/resources/static/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'src/main/resources/static/dist'),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};
Nach dem Login kopieren

Diese Konfiguration verwendet unsere Quelldatei als Einstiegspunkt, gepackt in eine Datei namens bundle.js, platziert in src/ Im Hauptteil /resources/static/dist-Verzeichnis. Es kompiliert auch unseren JavaScript- und React-Code.

Es ist zu beachten, dass im obigen Code src/main/resources/static/js/index.js unser Einstiegspunkt ist. Das bedeutet, dass wir in diesem Verzeichnis eine Datei namens index.js erstellen und unseren Code darin platzieren müssen.

  1. Webpack einbetten

Da wir nun eine Webpack-Konfiguration haben, müssen wir sie in unsere Anwendung einbetten. Dazu müssen wir unserer Spring Boot-Anwendung eine Webpack-Abhängigkeit hinzufügen.

Sie können Ihrer pom.xml-Datei den folgenden Inhalt hinzufügen:

<dependency>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.11.2</version>
</dependency>
Nach dem Login kopieren

Dieses Plugin hilft uns, Webpack beim Erstellen der Anwendung automatisch auszuführen.

Als nächstes müssen wir Folgendes zu unserer application.properties-Datei hinzufügen:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
Nach dem Login kopieren

Dadurch werden unsere statischen Dateien in die Spring Boot-Ressourcenverarbeitungskette eingefügt.

  1. Hinzufügen von React-Plugins

Jetzt haben wir die Infrastruktur von Webpack und Spring Boot eingerichtet und sind bereit, mit dem Hinzufügen von Plugins zu beginnen. Hier werde ich vorstellen, wie man ein React-Plugin hinzufügt.

Zuerst müssen wir das React npm-Modul installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:

npm install --save react react-dom
Nach dem Login kopieren

Jetzt können wir React in unserer index.js-Datei verwenden. Zum Beispiel:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
    <h1>Hello World!</h1>
  </div>
);

ReactDOM.render(<App />, document.getElementById('app'));
Nach dem Login kopieren

Hier rendern wir einfach ein Div, das den Text „Hello World!“ enthält.

  1. App erstellen und ausführen

Da wir nun unser Plugin hinzugefügt haben, müssen wir unsere App erstellen und prüfen, ob sie funktioniert.

Verwenden Sie den folgenden Befehl, um unsere App zu packen:

./mvnw frontend:install-node-and-npm frontend:npm frontend:webpack
Nach dem Login kopieren

Dadurch werden drei Schritte ausgeführt: Erstens werden Node.js und npm installiert. Zweitens wird Webpack ausgeführt, um unser JavaScript zu packen Code.

Jetzt können wir unsere Anwendung starten und darauf zugreifen. Verwenden Sie den folgenden Befehl, um den Spring Boot-Dienst zu starten:

./mvnw spring-boot:run
Nach dem Login kopieren

Jetzt können Sie http://localhost:8080 im Browser besuchen, um unsere Anwendung anzuzeigen!

  1. Zusammenfassung

Jetzt wissen Sie, wie Sie mit Spring Boot und Webpack Front-End-Projekte und Plug-in-Systeme erstellen. Wir haben zunächst ein Spring Boot-Projekt und eine Webpack-Konfiguration erstellt, dann die Webpack- und React-Plugins eingebettet und schließlich unsere Anwendung erstellt und ausgeführt.

Verwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen und so die Bereitstellung und Verwaltung des gesamten Codes in einer einzigen Anwendung zu vereinfachen. Dies erleichtert die Erstellung umfangreicherer und komplexerer Anwendungen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!