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

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.

2. 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'],
          },
        },
      },
    ],
  },
};

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.

3. 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>

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=/**

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

4. 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

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'));

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

5. 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

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

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

6. 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!