Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築する

最新の Web アプリケーションの複雑さが増すにつれ、優れたフロントエンド エンジニアリングとプラグイン システムを構築することがますます重要になっています。 Spring Boot と Webpack の人気により、これらはフロントエンド プロジェクトとプラグイン システムを構築するための完璧な組み合わせになりました。

Spring Boot は、最小限の構成要件で Java アプリケーションを作成する Java フレームワークです。自動構成などの多くの便利な機能を提供するため、開発者は Web アプリケーションをより迅速かつ簡単に構築および展開できます。

Webpack は、Node.js に基づくフロントエンド ビルド ツールです。さまざまな言語やフレームワークを最小限の静的リソースのセットにコンパイル、パッケージ化、最適化できます。

以下では、Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築する方法を紹介します。

1. Spring Boot プロジェクトの作成

まず、Spring Boot プロジェクトを作成する必要があります。 Spring Initializr を使用することも、IDE で直接作成することもできます。

プロジェクトを作成するときは、依存関係として Web を選択し、Spring Boot DevTools や Lombok などのいくつかの一般的なプラグインを追加する必要があります。

2. Webpack 構成の追加

次に、Spring Boot アプリケーションに Webpack 構成を追加する必要があります。 webpack.config.js というファイルを作成し、その中に次のコードを追加します。

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

この設定では、ソース ファイルをエントリ ポイントとして使用し、bundle.js というファイルにパッケージ化します。 src/main/resources/static/dist ディレクトリ。また、JavaScript と React コードもコンパイルします。

上記のコードでは、src/main/resources/static/js/index.js がエントリ ポイントであることに注意してください。つまり、そのディレクトリにindex.jsというファイルを作成し、そこにコードを配置する必要があります。

3. Webpack の埋め込み

Webpack 構成が完成したので、それをアプリケーションに埋め込む必要があります。このためには、Spring Boot アプリケーションに Webpack の依存関係を追加する必要があります。

pom.xml ファイルに次のコンテンツを追加できます:

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

このプラグインは、アプリケーションの構築時に Webpack を自動的に実行するのに役立ちます。

次に、application.properties ファイルに以下を追加する必要があります:

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

これにより、静的ファイルが Spring Boot リソース処理チェーンに追加されます。

4. React プラグインの追加

Webpack と Spring Boot のインフラストラクチャがセットアップされ、プラグインの追加を開始する準備が整いました。ここではReactプラグインの追加方法を紹介します。

まず、React npm モジュールをインストールする必要があります。コマンド ラインで次のコマンドを実行します。

npm install --save react react-dom

これで、index.js ファイルで React を使用できるようになります。例:

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

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

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

ここでは、「Hello World!」というテキストを含む div を単純にレンダリングします。

5. アプリケーションの構築と実行

プラグインを追加したので、アプリケーションを構築して動作するかどうかを確認する必要があります。

次のコマンドを使用してアプリケーションをパッケージ化します:

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

これにより 3 つのステップが実行されます: まず、Node.js と npm がインストールされます。次に、React モジュールがインストールされます。最後に、 Webpack を実行して JavaScript コードをバンドルします。

これで、アプリケーションを起動してアクセスできるようになりました。次のコマンドを使用して Spring Boot サービスを開始します。

./mvnw spring-boot:run

これで、ブラウザで http://localhost:8080 にアクセスしてアプリケーションを表示できるようになります。

6. 概要

これで、Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築する方法がわかりました。最初に Spring Boot プロジェクトと Webpack 構成を作成し、次に Webpack プラグインと React プラグインを埋め込み、最後にアプリケーションを構築して実行しました。

Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築すると、単一のアプリケーションですべてのコードを簡単にデプロイおよび管理できるようになります。これにより、より機能が豊富で複雑なアプリケーションの構築が容易になります。

以上がSpring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。