Spring Boot と Webpack を使用してフロントエンドプロジェクトとプラグインシステムを構築する-＆＃＆チュートリアル-php.cn

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

王林

リリース： 2023-06-22 09:13:59

オリジナル

1423 人が閲覧しました

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

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

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

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

Spring Boot プロジェクトの作成

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

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

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というファイルを作成し、そこにコードを配置する必要があります。

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 リソース処理チェーンに追加されます。

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 を単純にレンダリングします。

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

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

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

./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 にアクセスしてアプリケーションを表示できるようになります。

概要

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

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

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