اخیرا در حال یادگیری React بودم و همیشه از create-react-app برای ساخت پروژه‌های خودم، با کمترین زحمت و پیکربندی استفاده می‌کردم؛ و حدث میزنم که اکثر شما هم از create-react-app یا react-slingshot برای این کار استفاده می‌کردید. اگر می‌خواهید فقط بر روی React تمرکز کنید و بگذارید که خودش به پیکربندی‌ها را انجام دهد، این دو مورد ابزار شگفت‌انگیزی هستند. اما آیا می‌خواهید به این روش React را یاد بگیرید؟
احتما پاسخ شما «نه» است. پس بیایید شروع کنیم.
قبل از شروع
اگر با react و webpack آشنا نیستید میتوانید این دو را از طریق وبسایت راکت بصورت کامل یادبگیرید :
شروع کار
قبل از شروع، باید npm را بر روی سیستم خود نصب داشته باشید، که به همراه Node.js وجود دارد. میتوانید آن را از اینجا نصب کنید.
ساختار پوشه:
میتوانید شاخه‌های بالا را با استفاده از این دستورات بسازید:
mkdir react-boilerplate
cd react-boilerplate
mkdir -p src/components src/styles
شروع کردن (Initialize) پروژه
تمام پروژه‌هایی که از Node Package Manager (NPM) استفاده می‌کنند، باید شروع (Initialize) شوند. برای شروع یک پروژه، دستور زیر را در ترمینال وارد کنید. این دستور، یک فایل به نام package.json ایجاد می‌کند.
npm init
پس از انجام این کار، با چند سوال درباره پروژه مواجه می‌شوید. اگر می‌خواهید آن‌ها را رد کنید، میتوانید -y را اضافه کرده و از کلید «Enter» استفاده کنید.
npm init -y
حال، فایل package.json شما چنین ظاهری خواهد داشت:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
نصب Webpack
Webpack یک اتصال دهنده ماژول است که ما را قادر می‌سازد تا پروژه‌های خود را در یک فایل برای مراحل بعدی تولید، متصل کنیم. پس بیایید Webpack را به پروژه خود اضافه کنیم:
npm install webpack webpack-cli --save-dev
دستور بالا Webpack و Webpack-cli را به عنوان یک Dependency به پروژه ما اضافه می‌کند. ما Webpack-cli را نصب کردیم تا بتوانیم از Webpack در خطوط دستوری خود استفاده کنیم.
نصب React
React و React-dom را به عنوان یک Dependency نصب کنید:
npm install react react-dom --save
نصب Babel
در جهت کار کردن React، باید Babel را نیز به همراه آن نصب کنیم. ما به Babel برای Transpile کردن کدهای ES6 و JSX به ES5 نیاز داریم.
Babel-core، Babel-loader، Babel-preset-env و Babel-preset-react را به عنوان یک Dependency نصب کنید:
npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
- Babel-core: کد ES6 را به ES5 تبدیل می‌کند.
- Babel-lodaer: کمک کننده Webpack برای Transpile کردن کد، با توجه به پیش تنظمیات.
- Babel-preset-env: پیش تنظمیاتی که به Babel کمک می‌کنند تا کدهای ES6، ES7 و ES8 را به ES5 تبدیل کند.
- Babel-preset-react: پیش تنظمیاتی که JSX را به JavaScript تبدیل می‌کند.
Index.js
فایلی به نام Index.js داخل ریشه پوشه /src بسازید. فعلا، کد زیر را به آن اضافه کنید. این فایل، نقطه ورود به برنامه ما خواهد بود.
console.log("hello");
Index.html
فایلی به نام Index.html داخل ریشه پوشه /src بسازید و این کد را داخل آن قرار دهید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Boilerplate</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
نقطه ورود و فایل خروجی
فایلی به نام webpack.config.js را داخل شاخه ریشه پروژه بسازید، تا بتوانیم قوانینی برای لودرهای خود تعیین کنیم.
نقطه ورودی و شاخه خروجی برنامه‌مان را داخل فایل webpack.config.js تعریف می‌کنیم:
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
}
};
در کد بالا، Webpack تمام فایل‌های JavaScript ما را در فایل index-bundle.js، در شاخه /dist متصل می‌کند.
لودرهای Webpack
حال چند لودر داخل این فایل اضافه کنید، که مسئولیت بارگذاری و اتصال فایل‌های منبع را به عهده داشته باشند.
داخل فایل webpack.config.js، این کدها را اضافه کنید:
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
در اینجا، babel-loder برای بارگذاری فایل‌های JSX یا JavaScript ما، و css-loader هم برای بارگذاری و اتصال دادن تمام فایل‌های CSS ما داخل یک فایل استفاده می‌شود، که style-loader، تمام استایل‌هایی که تعریف کرده‌ایم را در تگ style موجود در هر سند اضافه می‌کند.
قبل از این که Webpack بتواند از css-loader و style-loader استفاده کند، باید آن‌ها را به عنوان یک Dependency نصب کنیم:
npm install css-loader style-loader --save-dev
babelrc
حال فایلی به نام .babelrc در شاخه ریشه پروژه به همراه این محتویات در آن بسازید:
{
"presets": [
"env",
"react"
]
}
این فایل به babel می‌گوید که از کدام پیش‌تنظیمات برای Transpile کردن کد استفاده کند. در اینجا، از دو پیش‌تنظیمات استفاده می‌کنیم:
- Env: این پیش‌تنظیمات برای Transpile کردن کدهای ES6، ES7 و ES8 به ES5 استفاده می‌شود.
- React: این پیش‌تنظیمات برای Transpile کردن کدهای JSX به ES5 استفاده می‌شود.
کمپایل کردن فایل‌ها با استفاده از Webpack
این کدها را به این صورت، به بخش آبجکت اسکریپت فایل package.json اضافه کنید:
"start": "webpack --mode development --watch",
"build": "webpack --mode production"
در اینجا، از نشانه Watch استفاده کرده‌ام؛ پس هر وقت که تغییری در فایل‌های منبع ایجاد شود، Webpack به طور خودکار تمام فایل‌های منبع را کمپایل می‌کند.
در Webpack 4 دو حالت وجود دارد. حالت تولید که فایل‌هایی بهینه‌سازی شده برای استفاده در روند تولید آماده می‌کند، و حالت توسعه که دارای کدهایی ساده و خوانا می‌باشد و به بهترین تجربه توسعه را برای شما به ارمغان می‌آورد. نشانه --mode به شما اجازه می‌دهد تا حالت مورد نظر را انتخاب کنید.
حال میتوانید پروژه مورد نظر را با کد زیر کمپایل کنید:
npm start
پس از اجرای دستور بالا، می‌بینید که فایل index_bundle.js در شاخه /dist ساخته شده است، و شامل کدهای Tranpile شده ES5 از فایل index.js است.
App.js
فایلی به نام App.js داخل پوشه کامپوننت‌های پوشه src بسازید و این محتویات را به آن اضافه کنید:
import React, { Component } from "react";
import '../styles/App.css';
class App extends Component {
render() {
return (
<div>
<h1>My React App!</h1>
</div>
);
}
}
export default App;
App.css
فایلی به نام App.css داخل پوشه styles در پوشه src بسازید و این محتویات را به آن اضافه کنید:
h1 {
color: #27aedb;
text-align: center;
}
فایل CSS برای اطمینان از کارکرد صحیح css-loader و style-loader استفاده می‌شود.
سپس فایل index.js که پیش‌تر ساختیم را ویرایش کنید و این کدها را به آن اضافه کنید:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";
ReactDOM.render(<App />, document.getElementById("root"));
نصب پلاگین Html-webpack-plugin
حالا باید پلاگین html-webpack-plugin را نیز نصب کنیم. این پلاگین یک فایل HTML تولید می‌کند، اسکریپت‌های موجود در فایل HTML را به آن وارد می‌کند و آن را در dist/index.html قرار می‌دهد.
Html-webpack-plugin را به عنوان یک Dependency نصب کنید:
npm install html-webpack-plugin --save-dev
حال باید پلاگین موجود در فایل webpack.config.js را پیکربندی کنیم. این کدها را داخل آن اضافه کنید:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index-bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]
};
در اینجا، مقدار Template key، فایل index.html که پیش‌تر ساختیم است و از این فایل به عنوان یک الگو استفاده می‌کند، و فایل جدیدی به نام index.html در پوشه /dist می‌سازد که اسکریپت‌های مورد نظر را نیز در خود دارد.
مراحل نصب و راه‌اندازی تقریبا تمام شده‌اند. تمام کاری که باید بکنیم، این است که فایل‌های منبع را با استفاده از Webpack کمپایل کنیم. میتوانید این کار را با استفاده از دستور زیر انجام دهید:
npm start
پس از آن، خروجی‌ای در پوشه /dist به دست خواهید آورد. حال فایل index.html را در یک مرورگر باز کنید. متن «My React App!» را داخل آن خواهید دید.
اما این روش یک جنبه منفی نیز دارد؛ این که در جهت دیدن تغییرات اعمال شده، باید به طور دستی صفحه را مجددا بارگذاری کنید. برای این که Webpack تغییرات ما را در نظر داشته باشد و هر موقع که تغییری به کامپوننت‌های خود اعمال کردیم صفحه را مجددا بارگذاری کند، می‌توانیم webpack-dev-server را نصب کنیم.
نصب Webpack-dev-server
Webpack-dev-server را به عنوان یک Dependecy نصب کنید:
npm install webpack-dev-server --save-dev
سپس اسکریپت موجود در فایل package.json را به این صورت تغییر دهید:
"start": "webpack-dev-server --mode development --open --hot"
در اینجا دو نشانه --open و --hot که در هنگام اعمال تغییرات به کامپوننت‌ها، صفحه را باز کرده و مجددا بارگذاری می‌کنند را اضافه کرده‌ام.
حال دستور زیر را در ترمینال اجرا کنید:
npm start
باید ببینید که صفحه مرورگر باز می‌شود و محتویات را به مانند اسکرین‌شات زیر نشان می‌دهد.
و در اینجا کار ما به اتمام می‌رسد. حال Boilerplate خود را برای React داریم که می‌توانیم از آن استفاده کنیم و پروژه‌های React خود را بسازیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید