استفاده از Webpack با Spring Boot

Webpack یک ابزار قدرتمند برای توسعه frontend است. این به ما امکان می دهد ساختار کد جاوا اسکریپت/CSS/SCSS خود را بهبود بخشیده و آن را برای استفاده در تولید آماده کنیم. ما چطور می تونیم Webpack را در برنامه Spring Boot ما ادغام کنید?

Spoiler: در طرح رایگان Bootify، برنامه های Spring Boot را می توان با طرح پایگاه داده سفارشی و پشته frontend مقداردهی اولیه کرد. این شامل Webpack با Bootstrap یا Tailwind CSS برای قسمت جلویی است، بنابراین کل پیکربندی زیر شامل DevServer و ادغام ساخت را دقیقاً مطابق با تنظیمات فردی خود دریافت می کنید. پروژه خود را باز کنید – بدون ثبت نام مستقیماً در مرورگر.

Node.js را آماده کنید

نقطه شروع کار با Webpack Node.js است که از npm برای مدیریت وابستگی های خارجی برای فرانت اند استفاده می کند. برای این ما ابتدا نیاز به ایجاد package.json در پوشه بالای پروژه Spring Boot ما.

{
  "name": "my-app-frontend",
  "author": "Bootify.io",
  "scripts": {
    "devserver": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "autoprefixer": "10.4.14",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss-loader": "^7.2.4",
    "postcss-preset-env": "^8.3.2",
    "sass": "^1.62.0",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "warnings-to-errors-webpack-plugin": "^2.3.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.3"
  }
}

package.json ما با وابستگی های Webpack و Bootstrap

در scripts بخش ما می توانیم دستورات خود را تعریف کنیم که می توان با آنها اجرا کرد npm run <script-name>. در حال حاضر اینجا هستیم آماده شدن برای راه اندازی DevServer که در طول توسعه از آن استفاده خواهیم کرد، و همچنین ساخت فایل های JS/CSS برای استفاده از آنها در شیشه نهایی برنامه Spring Boot ما. پس زمینه در این مورد بعدا دنبال می شود.

در dependencies بخش، کتابخانه‌هایی هستند که در مرورگر در فرانت‌اند واقعی ارائه شده در دسترس خواهند بود. در مثال ما Bootstrap را در نسخه فعلی 5.2.3 و Popper مورد نیاز را اضافه می کنیم. که در devDependencies هستند بسته های مربوط به توسعه و در مرورگر موجود نخواهد بود. به خصوص Webpack و همچنین وابستگی های دیگر برای پردازش فایل های JS/CSS ما در اینجا گنجانده شده است.

بعد از package.json ایجاد می شود و Node.js روی سیستم نصب می شود، می توانیم یک بار پروژه را مقداردهی اولیه کنیم npm install. تمام وابستگی های تعریف شده به طور خودکار در دانلود می شوند node_modules پوشه کتابخانه های جدید مورد نیاز را می توان بعداً با npm install <package-name>. را --save-dev پارامتر آنها را در devDependencies حوزه.

Webpack را پیکربندی کنید

فایل مرکزی برای مدیریت Webpack است webpack.config.js.

module.exports = (env, argv) => ({
  entry: './src/main/resources/js/app.js',
  output: {
    path: path.resolve(__dirname, './target/classes/static'),
    filename: 'js/bundle.js'
  },
  devtool: argv.mode === 'production' ? false : 'eval-source-map',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/bundle.css"
    }),
    new WarningsToErrorsPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$'/,
        include: path.resolve(__dirname, './src/main/resources/js'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, './src/main/resources/scss'),
        use: [
          argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                ]
              },
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [
      path.resolve(__dirname, './src/main/resources'),
      'node_modules'
    ],
  }
});

پیکربندی بسته وب برای ایجاد bundle.js و bundle.css

را entry و output بخش ها نقاط ورودی و خروجی را برای پردازش فایل های JS/CSS ما تعریف می کنند. نقطه ورود منحصرا است resources/js/app.js فایل، اما آن را به سایر فایل های SCSS ارجاع می دهد و به طور خودکار آنها را برای ساخت تقسیم می کند. با پیکربندی از devtool پارامتر، نقشه های منبع در طول توسعه در دسترس هستند تا منابع مکتوب واقعی ما را در DevTools مرورگر مشاهده کنید.

در optimization و module بخش ها قوانین پردازش را تعریف می کنیم. با استفاده از Babel می توانیم جاوا اسکریپت مدرن ES6 بنویسیم که برای حداکثر سازگاری تغییر شکل می دهد. ما استایل های خود را با SCSS می نویسیم، اما برای تحویل بعدی به CSS تبدیل شده و به حداقل می رسد.

راه اندازی DevServer برای توسعه

DevServer است در طول توسعه توصیه می شود که بتوانید تمام تغییرات را مستقیماً در مرورگر ردیابی کنید. در غیر این صورت، ساخت باید پس از هر تغییر اجرا شود. DevServer را می توان با پسوند زیر برای ما پیکربندی کرد webpack.config.js.

{
  // ...
  devServer: {
    port: 8081,
    compress: true,
    watchFiles: [
      'src/main/resources/templates/**/*.html',
      'src/main/resources/js/**/*.js',
      'src/main/resources/scss/**/*.scss'
    ],
    proxy: {
      '**': {
        target: 'http://localhost:8080',
        secure: false,
        prependPath: false,
        headers: {
          'X-Devserver': '1',
        }
      }
    }
  }
}

برنامه افزودنی برای پیکربندی DevServer

با این تنظیمات، DevServer روی پورت 8081 اجرا می‌شود و تمام درخواست‌هایی را که نمی‌تواند پاسخ دهد به برنامه Spring Boot ما در پورت 8080 ارسال می‌کند. بنابراین در طول توسعه، ما باید از طریق برنامه در حال اجرا خود دسترسی داشته باشیم. localhost:8081. با تعریف watchFiles را مرورگر پس از هر تغییر فایل به طور خودکار بارگیری می شود – در اینجا پسوند HTML شامل الگوهای Thymeleaf ما نیز می شود. این با راه اندازی بارگذاری مجدد داغ برای Thymeleaf بهترین کار را دارد.

ادغام اسکریپت های JS و CSS ما اکنون با پسوند زیر در قسمت انجام می شود <head> منطقه HTML ما

<link th:if="${T(io.bootify.WebUtils).getRequest().getHeader('X-Devserver') != '1'}"
        th:href="@{/css/bundle.css}" rel="stylesheet" />
<script th:src="@{/js/bundle.js}" defer></script>

یکپارچه سازی فایل های JS/CSS

با استفاده از DevServer می‌توانیم فایل‌ها را مانند منابع استاتیک معمولی قرار دهیم. با این حال، در طول توسعه، DevServer همیشه جاوا اسکریپت را همراه با CSS ارائه می‌کند، بنابراین در این مورد نیازی نیست استایل‌ها را جداگانه اضافه کنیم و آنها را از طریق غیرفعال کنیم. th:if.

با Maven یا Gradle یکپارچه سازی کنید

که در webpack.config.js ما تعریف کرده ایم که فایل های پردازش شده در آن نوشته می شوند target/classes/static. بنابراین آنها در شیشه نهایی ما گنجانده می شوند و می توان به عنوان یک منبع ثابت به آنها دسترسی داشت.

برای ادغام با Maven frontend-maven-plugin مورد نیاز است. این به عنوان یک مرحله اضافی در داخل اجرا می شود mvnw package، Node.js را به طور مستقل دانلود و اجرا می کند npm install و npm run build.

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <executions>
        <execution>
            <id>nodeAndNpmSetup</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npmInstall</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>npmRunBuild</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
    <configuration>
        <nodeVersion>v18.16.0</nodeVersion>
    </configuration>
</plugin>

پیکربندی افزونه frontend-maven برای Webpack

برای Gradle از پلاگین Node استفاده می شود که اجرا می شود npm run build. با پیکربندی inputs و outputs ما کش را فعال می کنیم و مراحل در طی آن نادیده گرفته می شوند gradlew build اگر هیچ تغییری در فایل های منبع ایجاد نشده باشد.

plugins {
    // ...
    id 'com.github.node-gradle.node' version '3.6.0'
}

// ...

node {
    download.set(true)
    version.set('18.16.0')
}

task npmRunBuild(type: NpmTask) {
    args = ['run', 'build']
    dependsOn npmInstall

    inputs.files(fileTree('node_modules'))
    inputs.files(fileTree('src/main/resources'))
    inputs.file('package.json')
    inputs.file('webpack.config.js')
    outputs.dir("$buildDir/resources/main/static")
}

processResources {
    dependsOn npmRunBuild
}

ادغام بیلد frontend در بیلد Gradle

با این ما داریم Webpack را برای استفاده در برنامه Spring Boot ما پیکربندی کرد! DevServer در طول توسعه از ما پشتیبانی می کند و با افزونه مناسب فایل های JS/CSS آماده شده و در ظرف چربی ما ادغام می شوند.

Bootify را می توان برای مقداردهی اولیه برنامه های Spring Boot با طرح پایگاه داده و frontend خود استفاده کرد. اینجا، Webpack را می توان با Bootstrap یا Tailwind CSS انتخاب کرد. در طرح حرفه ای ویژگی های پیشرفته ای مانند پروژه های چند ماژول و امنیت بهار در دسترس است.

» شروع پروژه در Bootify.io

مطالب بیشتر

Node.js را نصب کنید

افزونه Frontend Maven

پلاگین Gradle برای Node