Utilisez Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins

Alors que la complexité des applications Web modernes continue d'augmenter, la création d'excellents systèmes d'ingénierie frontale et de plug-ins est devenue de plus en plus importante. Avec la popularité de Spring Boot et Webpack, ils sont devenus une combinaison parfaite pour créer des projets frontaux et des systèmes de plug-ins.

Spring Boot est un framework Java qui crée des applications Java avec des exigences de configuration minimales. Il fournit de nombreuses fonctionnalités utiles, telles que la configuration automatique, afin que les développeurs puissent créer et déployer des applications Web plus rapidement et plus facilement.

Webpack est un outil de création front-end basé sur Node.js. Il peut compiler, empaqueter et optimiser divers langages et frameworks dans un ensemble minimal de ressources statiques.

Ci-dessous, je vais vous présenter comment utiliser Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins.

1. Créer un projet Spring Boot

Tout d'abord, nous devons créer un projet Spring Boot. Vous pouvez utiliser Spring Initializr ou le créer directement dans l'EDI.

Lors de la création du projet, nous devons sélectionner Web comme dépendance et ajouter des plug-ins courants, tels que Spring Boot DevTools et Lombok.

2. Ajouter une configuration Webpack

Nous devons maintenant ajouter la configuration Webpack pour notre application Spring Boot. Nous pouvons créer un fichier appelé webpack.config.js et y ajouter le code suivant :

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

Cette configuration utilisera notre fichier source comme point d'entrée, packagé dans un fichier appelé bundle.js, placé dans src/ Dans le main /resources/static/dist répertoire. Il compile également notre code JavaScript et React.

Il est à noter que dans le code ci-dessus, src/main/resources/static/js/index.js est notre point d'entrée. Cela signifie que nous devons créer un fichier appelé index.js dans ce répertoire et y placer notre code.

3. Intégration du Webpack

Maintenant que nous avons une configuration Webpack, nous devons l'intégrer dans notre application. Pour cela, nous devons ajouter une dépendance Webpack dans notre application Spring Boot.

Vous pouvez ajouter le contenu suivant dans votre fichier pom.xml :

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

Ce plugin nous aidera à exécuter automatiquement Webpack lors de la construction de l'application.

Ensuite, nous devons ajouter ce qui suit à notre fichier application.properties :

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

Cela ajoutera nos fichiers statiques dans la chaîne de gestion des ressources Spring Boot.

4. Ajout de plugins React

Nous avons maintenant l'infrastructure de Webpack et Spring Boot configurée et sommes prêts à commencer à ajouter des plugins. Ici, je vais vous présenter comment ajouter un plugin React.

Tout d'abord, nous devons installer le module React npm. Exécutez la commande suivante dans la ligne de commande :

npm install --save react react-dom

Nous pouvons maintenant utiliser React dans notre fichier index.js. Par exemple :

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

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

ReactDOM.render(<App />, document.getElementById('app'));

Ici, nous rendons simplement un div contenant le texte "Hello World!"

5. Créer et exécuter l'application

Maintenant que nous avons ajouté notre plugin, nous devons créer notre application et voir si elle fonctionne.

Utilisez la commande suivante pour empaqueter notre application :

./mvnw frontend:install-node-and-npm frontend:npm frontend:webpack

Cela effectuera 3 étapes : premièrement, elle installera Node.js et npm ; deuxièmement, elle installera notre module React et enfin, elle exécutera Webpack pour empaqueter notre JavaScript ; code.

Nous pouvons maintenant lancer notre application et y accéder. Utilisez la commande suivante pour démarrer le service Spring Boot :

./mvnw spring-boot:run

Vous pouvez maintenant visiter http://localhost:8080 dans le navigateur pour voir notre application !

6. Résumé

Vous savez maintenant comment utiliser Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins. Nous avons d'abord créé un projet Spring Boot et une configuration Webpack, puis intégré les plugins Webpack et React, et enfin construit et exécuté notre application.

Utilisez Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins, facilitant ainsi le déploiement et la gestion de tout le code dans une seule application. Cela facilite la création d’applications plus riches et plus complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!