کانفیگ Webpack Babel React از صفر!

سلام دوستان امیدوارم حالتون میزون باشه.

چند وقت پیش یه پروژه ای برام پیشنهاد شد با React که ازم خواستن پروژه رو از صفر خودم بسازم و از هیچ Boilerplate آماده ای استفاده نکنم.

پروژه جذابی بود به نظرم چون پشت صحنه میدونستی داره چه اتفاقاتی میوفته و منم شروع کردم به ساختن پروژه و حالا میخوام یه کانفیگ ساده رو باهاتون به اشتراک بذارم و امیدوارم راضی باشید از این پست :).

قبل از دست به کد شدن و این داستانا موارد مورد نیاز برای تهیه این کانفیگ رو بگم براتون D: :

1 نود جی اس رو سیستم تون نصب باشه

من از پکیج منیجر Yarn استفاده میکنم ولی اجباری نیست، شما میتونید با همون npm کار کنید (npm همراه با نود جی اس رو سیستمتون نصب میشه).

خب بریم دست به کد بشیم:

اولین کاری که میکنید اینه که cmd یا هر command prompt که باهاش کار میکنید رو باز کنید و کد زیر رو بنویسید:

mkdir webpack-babel-react-starter
cd webpack-babel-react-starter

با این کار یه پوشه به اسم webpack-babel-react-starter میسازیم و وارد پوشه میشیم.

خب برای ایجاد پروژه به package.json نیاز داریم، برای ساختن میتونید تو cmd بنویسیند:
npm init -y

با این کار package.json ما ساخته میشه و الان باید کتابخونه های مورد نیاز مون رو نصب کنیم:

خب اولین کتابخونه ها webpack و webpack-cli هستن که به این صورت میتونید نصبشون کنید:

npm install webpack webpack-cli --save-dev

وقتی کتابخونه ها نصب شدن متوجه میشید که تو پوشه پروژمون به فولدر به اسم node_modules اضافه شده علاوه بر این تو فایل package.json تو بخش " devDependencies" اسم دو تا کتابخونه رو میبینید.

خب بریم سراغ Babel:

مطمعناً میدونید Babel برای تبدیل کد های ES6 ما به ES5 هست تا مرورگر ها بتونن کد های جاوا اسکریپتی رو بخونن و اجرا کنن.

از یه طرف ما اکثر داریم از ES6 استفاده میکنیم تو کامپوننت های React یا از arrow function استفاده میکنیم، اینجای کار Babel میاد و کد هامون رو تبدیل به ES5 میکنه.

خب بریم سراغ نصب:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

خب Babel-core که خود کتابخونه هست Babel-preset-env برای اینکه که شما بدون نیاز به تعریف محیط و شروط خاص از آخرین ورژن جاوا اسکریپت استفاده کنید و Babel میاد خودش تو پشت صحنه کد هاتون رو برای مرورگر های مختلف تبدیل میکنه.Babel-preset-react برای تبدیل JSX به جاوا اسکریپت هست و در نهایت babel-loader یه لودر برای وب پک هست تا ES6 رو به ES5 تبدیل کنه.

بعد از نصب شدن اینا هم یه فایل به اسم babelrc. تو root پروژه مون میسازیم و کد زیر رو توش مینویسیم:

{
  "presets": ["@babel/env", "@babel/react"]
}

بعد این کار یه پوشه به اسم src تو فولدر پروژتون بسازید و یه فایل به اسم index.js داخل فولدر.

خب الان میریم React رو نصب میکنیم و اولین کامپوننت مون رو مینویسیم.

برای این کار کد زیر رو تو cmd وارد کنید

npm install react react-dom

خب تو فایل index.js داخل فولدر src هم اولین کامپوننت مون رو مینویسیم به این صورت:

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

const Index = () => {
  return (
    <div className="full-screen">
      <div>
        <h1>
          React Page {" "}
        </h1>
        <br />
        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more
        </a>
      </div>
    </div>
  );
};

export default Index;

خب حالا میریم سراغ فایل کانفیگ وب پک:

بازم تو root پروژه یه فایل به این اسم بسازید: webpack.config.js

و کد زیر رو توش قرار بدید

const path = require("path");
module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

با این کار داریم فایل ورودی و خروجی رو تو وب پک تعیین میکنیم و درنهایت بهش میگیم هر جا تو پوشه src فایل js یا jsx دیدی با استفاده از babel-loader کد هامون رو تبدیل به ES5 کن.

اما برای این که خروجی React رو بتونیم ببینیم به یه پلاگین نیاز داریم به اسم

html-webpack-plugin

با این پلاگین وب پک میاد فایل خروجی رو توی مرورگر روی DOM رندر میکنه

برای نصب کردنش کد زیر رو استفاده کنید

npm install html-webpack-plugin --save-dev

خب یه تغییر کوچیکی تو فایل کانفیگ وب پک باید انجام بدیم و در نهایت فایل مون به این صورت باید باشه:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

خب حالا بریم این فایل html رو بسازیم، داخل فولدر src یه فایل به اسم index.html بسازید و کد زیر رو توش وارد کنید:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>React, Webpack, Babel Starter Pack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <!-- your react app will render here -->
    <div id="app"></div>
  </body>
</html>

خب الان میریم به فایل index.js و کد مون رو تکمیل میکنیم، از اونجایی که داریم React کار میکنید بهتره که ساختار component رو رعایت کنیم. برای این کار یه فولدر به اسم components داخل فولدر src میسازیم.

تو پوشه components فایل های App.js و app.scss_ رو بسازید.

فایل App.js:

import React from "react";
import "./app.scss";

const App = () => {
  return (
    <div className="full-screen">
      <div>
        <h1>
          React Page {" "}
        </h1>
        <br />
        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more now
        </a>
      </div>
    </div>
  );
};

export default App;

و فایل app.scss

body {
  background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
  background-size: 300% 300%;
  -webkit-animation: Background 25s ease infinite;
  -moz-animation: Background 25s ease infinite;
  animation: Background 25s ease infinite;
}

.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  //_ works with row or column_

  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

h1 {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 4em;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6);

  &:after {
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-family: "Poiret One", sans-serif;
    content: "React project powered by webpack and babel with support for sass";
    font-size: 0.4em;
    text-align: center;
  }
}

.button-line {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  opacity: 0.8;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.5s ease;
  margin: 0 auto;
  display: block;

  &:hover {
    opacity: 1;
    background-color: #fff;
    color: grey;
  }
}

@-webkit-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

خب از بریم سراغ کامپایل کردن Sass به CSS از طریق وب پک

برای این کار باید کتابخونه های زیر رو به این صورت نصب کنید:

npm install css-loader sass-loader mini-css-extract-plugin node-sass --save-dev

خب بعد نصب شدنشون تغییرات لازم رو تو فایل کانفیگ وب پک اعمال میکنیم و فایل نهایی به این صورت باید باشه:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

یه نکته مهم تو لودر های webpack اینه که وب پک میاد از راست به چپ از لودر ها استفاده میکنه پس ترتیب نوشتن شون مهمه.

برای کامپایل sass اول از sass-loader بعد از css-loader و در نهایت از MiniCssExtractPlugin استفاده میکنه

و آخرین قسمت کارمون اینه که webpack-dev-server رو نصب بکنیم تا وب پک برامون یه سرور مجازی بسازه و حین توسعه از استفاده کنیم.

npm install webpack-dev-server --save-dev 

بعد از نصبش تو فایل package.json این تیکه از کد رو اضافه کنید بهش:

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }
  

در نهایت با استفاده از دستور npm run dev میتونید خروجی رو به این صورت تو مرورگرتون ببینید

مرسی که تا اینجای کار بامن همراه بودید امیدوارم تونسته باشم کمی به دانش تون اضافه کرده باشم.

راستی برای این پستم یه ویدیو هم ظبط میکنم که دیگه بهتر متوجه داستان بشید :)

نظراتتون برام مهمه مرسی که کامنت میذارید ;)

تو اینستا هم میتونید فالووم کنید و از خبرات جدید بی بهره نمونید مخصوصا از چند شنبه با آرمین های پیش رو با خبر باشید
instagram.me/awrminkhodaei