Gunakan Spring Boot dan Webpack untuk membina projek bahagian hadapan dan sistem pemalam

Memandangkan kerumitan aplikasi web moden terus meningkat, membina sistem kejuruteraan dan pemalam bahagian hadapan yang cemerlang telah menjadi semakin penting. Dengan populariti Spring Boot dan Webpack, mereka telah menjadi gabungan sempurna untuk membina projek bahagian hadapan dan sistem pemalam.

Spring Boot ialah rangka kerja Java yang mencipta aplikasi Java dengan keperluan konfigurasi yang minimum. Ia menyediakan banyak ciri berguna, seperti konfigurasi automatik, supaya pembangun boleh membina dan menggunakan aplikasi web dengan lebih pantas dan lebih mudah.

Webpack ialah alat binaan bahagian hadapan berdasarkan Node.js. Ia boleh menyusun, membungkus dan mengoptimumkan pelbagai bahasa dan rangka kerja ke dalam set sumber statik yang minimum.

Di bawah saya akan memperkenalkan cara menggunakan Spring Boot dan Webpack untuk membina projek bahagian hadapan dan sistem pemalam.

1. Buat projek Spring Boot

Pertama, kita perlu mencipta projek Spring Boot. Anda boleh menggunakan Spring Initializr atau menciptanya terus dalam IDE.

Apabila mencipta projek, kita perlu memilih Web sebagai pergantungan dan menambah beberapa pemalam biasa, seperti Spring Boot DevTools dan Lombok.

2. Tambah konfigurasi Webpack

Sekarang kami perlu menambah konfigurasi Webpack untuk aplikasi Spring Boot kami. Kita boleh mencipta fail bernama webpack.config.js dan menambah kod berikut di dalamnya:

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

Konfigurasi ini akan menggunakan fail sumber kami sebagai titik masuk, dibungkus ke dalam fail bernama bundle.js, Letakkannya di direktori src/main/resources/static/dist. Ia juga menyusun kod JavaScript dan React kami.

Perlu diambil perhatian bahawa dalam kod di atas, src/main/resources/static/js/index.js ialah titik masuk kami. Ini bermakna kita perlu mencipta fail yang dipanggil index.js dalam direktori itu dan meletakkan kod kita di dalamnya.

3. Membenamkan Pek Web

Kini setelah kami mempunyai konfigurasi Pek Web, kami perlu membenamkannya ke dalam aplikasi kami. Untuk ini, kami perlu menambah kebergantungan Webpack dalam aplikasi Spring Boot kami.

Anda boleh menambah kandungan berikut dalam fail pom.xml anda:

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

Pemalam ini akan membantu kami menjalankan Webpack secara automatik semasa membina aplikasi.

Seterusnya, kami perlu menambah yang berikut pada fail application.properties kami:

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

Ini akan menambah fail statik kami pada rantaian pemprosesan sumber Spring Boot.

4. Tambah Pemalam React

Sekarang kami telah menyediakan infrastruktur Webpack dan Spring Boot, kami bersedia untuk mula menambah pemalam. Di sini saya akan memperkenalkan cara menambah plugin React.

Pertama, kita perlu memasang modul React npm. Jalankan arahan berikut dalam baris arahan:

npm install --save react react-dom

Sekarang kita boleh menggunakan React dalam fail index.js kami. Sebagai contoh:

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

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

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

Di sini kami hanya memaparkan div yang mengandungi teks "Hello World!"

5. Membina dan menjalankan apl

Sekarang kami telah menambah pemalam kami, kami perlu membina apl kami dan melihat sama ada ia berfungsi.

Gunakan arahan berikut untuk membungkus aplikasi kami:

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

Ini akan melakukan 3 langkah: pertama, ia akan memasang Node.js dan npm, kedua, ia akan memasang modul React kami; ia akan menjalankan Webpack untuk menggabungkan kod JavaScript kami.

Kini, kami boleh melancarkan aplikasi kami dan mengaksesnya. Gunakan arahan berikut untuk memulakan perkhidmatan Spring Boot:

./mvnw spring-boot:run

Kini anda boleh melawati http://localhost:8080 dalam penyemak imbas untuk melihat aplikasi kami!

6. Ringkasan

Kini anda tahu cara menggunakan Spring Boot dan Webpack untuk membina projek bahagian hadapan dan sistem pemalam. Kami mula-mula mencipta projek Spring Boot dan konfigurasi Webpack, kemudian membenamkan pemalam Webpack dan React, dan akhirnya membina dan menjalankan aplikasi kami.

Gunakan Spring Boot dan Webpack untuk membina projek bahagian hadapan dan sistem pemalam, menjadikannya mudah untuk menggunakan dan mengurus semua kod dalam satu aplikasi. Ini menjadikannya lebih mudah untuk membina aplikasi yang lebih kaya dan lebih kompleks.

Atas ialah kandungan terperinci Gunakan Spring Boot dan Webpack untuk membina projek bahagian hadapan dan sistem pemalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!