بووتستراپ و وێبپاک

ڕێنمایی فەرمی بۆ چۆنیەتی جێگیرکردن و کۆکردنەوەی CSS و JavaScript ی Bootstrap لە پرۆژەکەتدا بە بەکارهێنانی Webpack.

لەم پەیجەدا

دەتەوێت تا کۆتایی باز بدەیت؟ کۆدی سەرچاوە و دیمۆی کارکردن بۆ ئەم ڕێنماییە لە کۆگای twbs/examples دابەزێنە . هەروەها دەتوانیت نموونەکە لە StackBlitz بکەیتەوە بۆ دەستکاریکردنی ڕاستەوخۆ.

دا مه رزاندن

ئێمە پڕۆژەیەکی Webpack بە Bootstrap لە سفرەوە دروست دەکەین، بۆیە هەندێک پێشمەرج و هەنگاوی پێشەوە هەیە پێش ئەوەی بەڕاستی بتوانین دەست پێ بکەین. ئەم ڕێنماییە پێویستی بە دامەزراندنی Node.js هەیە و هەندێک ئاشنا بیت بە تێرمیناڵەکە.

فۆڵدەری پرۆژە دروست بکە و npm دابنێ. ئێمە my-projectفۆڵدەرەکە دروست دەکەین و npm بە -yئارگومێنتەکە سەرەتایی دەکەین بۆ ئەوەی هەموو پرسیارە کارلێککەرەکانمان لێ نەپرسێت.
```
mkdir my-project && cd my-project
npm init -y
```
وێبپاک دابمەزرێنە. دواتر پێویستە وابەستەییەکانی پەرەپێدانی وێبپاکمان دابمەزرێنین: webpackبۆ ناوەکی وێبپاک، webpack-cliبۆ ئەوەی بتوانین فرمانەکانی وێبپاک لە تێرمیناڵەوە جێبەجێ بکەین، و webpack-dev-serverبۆ ئەوەی بتوانین سێرڤەرێکی پەرەپێدانی ناوخۆیی جێبەجێ بکەین. ئێمە بەکاریدەهێنین --save-devبۆ ئاماژەدان بەوەی کە ئەم وابەستەییانە تەنها بۆ بەکارهێنانی پەرەپێدانن و بۆ بەرهەمهێنان نین.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Bootstrap دابمەزرێنە. ئێستا دەتوانین Bootstrap دابمەزرێنین. هەروەها ئێمە Popper دادەمەزرێنین لەبەرئەوەی درۆپداونەکانمان، پۆپۆڤەرەکان و توولتیپەکانمان پشتی پێدەبەستن بۆ جێگیرکردنیان. ئەگەر پلانت نییە ئەو پێکهاتانە بەکاربهێنیت، دەتوانیت لێرەدا پۆپەر نەهێڵیت.
```
npm i --save bootstrap @popperjs/core
```
وابەستەیی زیادە دابنێ. جگە لە وێبپاک و بووتستراپ، پێویستمان بە چەند وابەستەیەکی تر هەیە بۆ ئەوەی بە شێوەیەکی دروست CSS و JS ی بووتستراپ لەگەڵ وێبپاک هاوردە و باندڵ بکەین. لەوانە Sass و هەندێک لە loaders و Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

ئێستا کە هەموو وابەستەییەکانی پێویستمان دامەزراندووە، دەتوانین دەست بکەین بە دروستکردنی فایلەکانی پڕۆژەکە و هاوردەکردنی Bootstrap.

پێکهاتەی پڕۆژە

پێشتر my-projectفۆڵدەرەکەمان دروست کردووە و npmمان دەستپێکردووە. srcئێستا ئێمە فۆڵدەری و فۆڵدەرەکانیش دروست دەکەین distبۆ ئەوەی پێکهاتەی پڕۆژەکە تەواو بکەین. ئەمانەی خوارەوە لە , جێبەجێ بکە my-project، یان بە دەستی فۆڵدەر و پێکهاتەی فایلەکە دروست بکە کە لە خوارەوە نیشان دراوە.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

کاتێک تەواو بوویت، پڕۆژە تەواوەکەت دەبێت بەم شێوەیە دەربکەوێت:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

لەم خاڵەدا هەموو شتێک لە شوێنی گونجاودایە، بەڵام وێبپاک کار ناکات چونکە هێشتا ئێمە پڕ webpack.config.jsنەکردووەتەوە.

ڕێکخستنی وێبپاک

بە دامەزراندنی وابەستەییەکان و ئامادەبوونی فۆڵدەری پڕۆژەکەمان بۆ ئەوەی دەست بە کۆدکردن بکەین، ئێستا دەتوانین وێبپاک ڕێکبخەین و پڕۆژەکەمان بە شێوەیەکی ناوخۆیی بەڕێوەببەین.

webpack.config.jsلە دەستکاریکەرەکەتدا بکەرەوە . بەو پێیەی بەتاڵە، پێویستە هەندێک ڕێکخستنی boilerplate زیاد بکەین بۆ ئەوەی بتوانین سێرڤەرەکەمان دەستپێبکەین. ئەم بەشەی ڕێکخستنەکە بە وێبپاک دەڵێت کە بەدوای جاڤاسکڕێپتی پڕۆژەکەماندا بگەڕێت، کۆدی کۆمپایڵکراو لە کوێ دەربهێنرێت بۆ ( dist)، و چۆن سێرڤەری پەرەپێدان دەبێت ڕەفتار بکات (کێشان لە distفۆڵدەرەکە بە دووبارە بارکردنەوە گەرم).
```
const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}
```
دواتر ئێمە پڕ دەکەینەوە لە dist/index.html. ئەمە لاپەڕەی HTML یە کە وێبپاک لە وێبگەڕەکەدا باری دەکات بۆ بەکارهێنانی CSS و JS ی باندڵکراو کە لە هەنگاوەکانی دواتردا زیاد دەکەین بۆی. پێش ئەوەی بتوانین ئەوە بکەین، دەبێت شتێکی پێ بدەین بۆ ئەوەی ڕەندەر بکات و outputJS لە هەنگاوی پێشووەوە لەخۆ بگرێت.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
```
ئێمە لێرەدا کەمێک لە ستایلکردنی Bootstrap لەگەڵ وەکەدا دەخەینە ناوەوە div class="container"بۆ <button>ئەوەی بزانین کەی CSS ی Bootstrap لەلایەن Webpack ەوە باردەکرێت.
ئێستا پێویستمان بە سکریپتی npm هەیە بۆ ئەوەی Webpack جێبەجێ بکەین. ئەو سکریپتە بکەرەوە package.jsonو زیاد بکە کە لە startخوارەوە نیشان دراوە (پێویستە پێشتر سکریپتی تاقیکردنەوەکەت هەبێت). ئێمە ئەم سکریپتە بەکاردەهێنین بۆ دەستپێکردنی سێرڤەری ناوخۆیی Webpack dev ـمان.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
وە لە کۆتاییدا دەتوانین دەست بە Webpack بکەین. لە my-projectفۆڵدەری ناو تێرمیناڵەکەتەوە ئەو سکریپتە تازە زیادکراوەی npm جێبەجێ بکە:
```
npm start
```

لە بەشی داهاتوو و کۆتایی ئەم ڕێنماییەدا، ئێمە بارکەرەکانی Webpack ڕێکدەخەین و هەموو CSS و JavaScript ی Bootstrap هاوردە دەکەین.

هاوردەکردنی بووتستراپ

هاوردەکردنی Bootstrap بۆ ناو Webpack پێویستی بەو لۆدەرانە هەیە کە لە بەشی یەکەمدا دامانمەزراندووە. ئێمە بە npm دامەزراندووین، بەڵام ئێستا وێبپاک پێویستی بە ڕێکخستن هەیە بۆ ئەوەی بەکاریان بهێنێت.

بارهەڵگرەکان لە webpack.config.js. ئێستا پەڕگەی ڕێکخستنەکەت تەواو بووە و پێویستە لەگەڵ پارچەی خوارەوەدا بگونجێت. تاکە بەشێکی نوێ لێرەدا moduleبەشەکەیە.

const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

لێرەدا دووبارە باس لەوە دەکەینەوە کە بۆچی پێویستمان بەم هەموو لۆدەرانە هەیە. style-loaderCSS دەخاتە ناو <style>توخمێکەوە لە <head>لاپەڕەی HTML، css-loaderیارمەتی بەکارهێنانی @importو دەدات url()، postcss-loaderپێویستە بۆ Autoprefixer، و sass-loaderڕێگەمان پێدەدات Sass بەکاربهێنین.

ئێستا، با CSS ی Bootstrap هاوردە بکەین. ئەمانەی خوارەوە زیاد بکە بۆ src/scss/styles.scssبۆ هاوردەکردنی هەموو سەرچاوەی Bootstrap ی Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
هەروەها دەتوانیت بە تاک بە تاک ستایلشێتەکانمان هاوردە بکەیت ئەگەر بتەوێت. بۆ زانینی وردەکارییەکان دۆکیومێنتەکانی هاوردەکردنی ساسمان بخوێنەرەوە .
دواتر CSS بار دەکەین و جاڤاسکڕێپتی Bootstrap هاوردە دەکەین. ئەمانەی خوارەوە زیاد بکە بۆ src/js/main.jsبۆ بارکردنی CSS و هاوردەکردنی هەموو JS ی Bootstrap. Popper بە شێوەیەکی ئۆتۆماتیکی لە ڕێگەی Bootstrap هاوردە دەکرێت.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
هەروەها دەتوانیت پێوەکراوەکانی جاڤاسکڕێپت بە تاک هاوردە بکەیت بەپێی پێویست بۆ ئەوەی قەبارەی باندڵەکان کەم بکەیتەوە:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
بۆ زانیاری زیاتر لەسەر چۆنیەتی بەکارهێنانی پێوەکراوەکانی Bootstrap، دۆکیومێنتەکانی جاڤاسکڕێپتمان بخوێنەرەوە .
وە تۆ تەواو بوویت! 🎉 بە تەواو بارکردنی سەرچاوەی Bootstrap Sass و JS ، ئێستا پێویستە سێرڤەری گەشەپێدانی ناوخۆییت بەم شێوەیە دەربکەوێت.

ئێستا دەتوانیت دەست بکەیت بە زیادکردنی هەر پێکهاتەیەکی Bootstrap کە بتەوێت بەکاری بهێنیت. دڵنیابە سەیری پڕۆژەی نموونەی تەواوی وێبپاک بکە بۆ ئەوەی چۆن Sass تایبەتمەندی زیادە لەخۆبگریت و دروستکردنەکەت باشتر بکەیت بە هاوردەکردنی تەنها ئەو بەشانەی CSS و JS ی Bootstrap کە پێویستت پێیانە.

باشکردنی بەرهەمهێنان

بەپێی ڕێکخستنەکەت، لەوانەیە بتەوێت هەندێک باشترکردنی ئاسایش و خێرایی زیادە جێبەجێ بکەیت کە بەسوودن بۆ بەڕێوەبردنی پڕۆژەکە لە بەرهەمهێناندا. تێبینی بکە کە ئەم باشترکردنانە لەسەر پڕۆژەی نموونەی Webpack جێبەجێ ناکرێت و جێبەجێکردنیان لەسەر تۆیە.

دەرهێنانی CSS

ئەو style-loaderشتەی کە لە سەرەوە ڕێکمان خستووە بە ئاسانی CSS دەداتە ناو باندڵەکە بۆ ئەوەی بە دەست بارکردنی پەڕگەیەکی CSS لە ناوەوە dist/index.htmlپێویست نەبێت. لەوانەیە ئەم ڕێگایە بە سیاسەتێکی توندی ئاسایشی ناوەڕۆک کار نەکات، بەڵام، و لەوانەیە ببێتە گەردنی تەنگ لە بەرنامەکەتدا بەهۆی قەبارەی گەورەی باندڵەکە.

بۆ جیاکردنەوەی CSS بۆ ئەوەی بتوانین ڕاستەوخۆ لە باری بکەین dist/index.html، mini-css-extract-loaderپێوەکراوەکەی Webpack بەکاربهێنە.

سەرەتا پێوەکراوەکە دابمەزرێنە:

npm install --save-dev mini-css-extract-plugin

پاشان نموونە بکەرەوە و پێوەکراوەکە لە ڕێکخستنی Webpack بەکاری بهێنە:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

دوای دووبارە کارپێکردنەوە npm run build، فایلێکی نوێ دەبێت dist/main.css, کە هەموو ئەو CSS یانەی تێدایە کە لەلایەن src/js/main.js. ئەگەر dist/index.htmlئێستا لە وێبگەڕەکەتدا سەیری بکەیت، ئەوا ستایلەکە نامێنێت، وەک چۆن ئێستا لە dist/main.css. دەتوانیت CSS ی دروستکراو dist/index.htmlبەم شێوەیە دابنێیت:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

دەرهێنانی فایلەکانی SVG

CSS ی Bootstrap چەندین ئاماژە لە پەڕگەکانی SVG لە ڕێگەی data:URI ی ناو هێڵەوە لەخۆدەگرێت. ئەگەر سیاسەتی ئاسایشی ناوەڕۆک بۆ پڕۆژەکەت پێناسە بکەیت کە data:URI بۆ وێنەکان بلۆک دەکات، ئەوا ئەم پەڕگانە SVG بار نابن. دەتوانیت ئەم کێشەیە بە دەرهێنانی پەڕگەکانی SVG ی ناو هێڵ بە بەکارهێنانی تایبەتمەندی مۆدیولەکانی سەرمایەی وێبپاک ڕزگار بکەیت.

Webpack ڕێکبخە بۆ دەرهێنانی فایلەکانی SVG لەناو هێڵ بەم شێوەیە:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

دوای دووبارە کارکردنەوە npm run build، دەبینیت فایلەکانی SVG دەرهێنراون بۆ ناو dist/iconsCSS و بە با��ی ئاماژەیان پێکراوە.

لێرەدا شتێکی هەڵە یان بەسەرچوو دەبینیت؟ تکایە کێشەیەک لە GitHub بکەرەوە . پێویستت بە یارمەتی هەیە بۆ چارەسەرکردنی کێشەکان؟ لە GitHub بگەڕێ یان دەست بە گفتوگۆ بکە .