كيفية إعداد مشروع React.js باستخدام Webpack 4 و Babel

raheel · 01-04-2019, 06:04 PM

معظمنا ممن سبق لهم التعامل مع مكتبة React.js يعلمون بأن أفضل طريقة لبدء أي مشروع هي باستخدام الحزمة create-react-app، وهي الطريقة الرسمية الموصى بها.
لا خلاف على أن هذه الحزمة قيمة جدا وتمكن المطورين من بدء مشاريع React.js بدون مجهود يذكر ومن دون أي إعدادات مسبقة وبالتالي التركيز على React.js فقط. ولكن، ماذا لو أردنا فهم كل ما يدور في كواليس تلك الحزمة ؟ ماذا لو أردنا إعداد مشروع React.js بأنفسنا ومعرفة كيفية اشتغال هذه المكتبة مع محزم الوحدات الأشهر Webpack ؟
حزمة create-react-app صممت لجعلك تبدأ العمل مباشرة وتترك لها مهمة إعداد وبناء المشروع، ولا يهمها أن تفهم كيف يقوم Webpack بتحويل أكواد JSX إلى جافاسكريبت عادي أو طريقة استدعاء واستيراد ملفات CSS من داخل مكونات React عن طريق import إلخ…
إذا أردت أن تفهم كل هذه الأمور وتتعلم كيفية اشتغالها وتناغمها، فعليك إذن أن تقوم بإعداد مشروعك من الصفر.
لهذا الغرض نحن هنا اليوم
سنتعلم معا كيفية إعداد مشروع React.js باستخدام محزم الوحدات Webpack 4.
هيا بنا نبدأ العمل

أولا لنفتح نافذة الأوامر السطرية ونقوم بإنشاء مجلد اسمه react-from-scratch وبداخله مجلد واحد اسمه src يضم بدوره مجلدين اثنين : components و styles.
mkdir react-from-scratch cd react-from-scratch mkdir -p src/components src/styles
1
2
3

mkdir react-from-scratch
cd react-from-scratch
mkdir -p src/components src/styles

لتهيئة المشروع، سنقوم بتنفيذ الأمر التالي داخل المجلد react-from-scratch وذلك جريا على عادتنا في جميع المشاريع التي تستخدم مدير الحزم npm :
npm init -y
1

npm init -y

بعد تنفيذ هذا الأمر سيتولد الملف الغني عن التعريف package.json :
{ "name": "react-from-scratch", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
1
2
3
4
5
6
7
8
9
10
11
12

{
"name": "react-from-scratch",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

تحميل Webpack

Webpack ـ كما رأينا في مقال سابق مفصل ـ هو محزم وحدات Module bundler يمكننا من تحزيم وجمع ملفات مشروعنا في ملف واحد (في الغالب).
دعونا نقوم بتحميل وتثبيت ويب باك في مشروعنا :
npm install Webpack webpack-cli --save-dev
1

npm install Webpack webpack-cli --save-dev

هذا الأمر سيقوم بتحميل كل من حزمتي Webpack و webpack-cli. الأولى تضم الوظائف الأساسية لمحزم الوحدات Webpack والثانية تتيح لنا إمكانية استخدام أوامر Webpack من نافذة الأوامر السطرية Command line.
تحميل مكتبة React.js

npm install react react-dom --save
1

npm install react react-dom --save

تحميل بابل Babel

حتى تعمل مكتبة React.js بشكل جيد، نحن مطالبون بتثبيت الأداة Babel من أجل تحويل (Transpile) أكواد جافاسكريبت ES6 و JSX إلى أكواد جافاسكريبت ES5 مدعومة من كافة المتصفحات.
npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
1

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

قمنا هنا بتحميل 4 حزم :

babel-core : الحزمة التي تحتوي على الشفرة المصدرية لنواة بابل.
babel-loader : هذه الحزمة تمثل ال loader الذي يستخدمه Webpack لكي يعمل بتوافقية كاملة مع Babel. يعني أن Webpack يستعين ببابل في عملية Transpiling قبل أن يقوم بعملية التجميع أو التحزيم ( Bundling ).
babel-preset-env : الحزمة التي تمكن نواة بابل من تحويل أكواد جافاسكريبت ES6 إلى أكواد جافاسكريبت ES5.
babel-preset-react : مسؤولة عن عملية تحويل أكواد JSX إلى جافاسكريبت.

إنشاء الملف index.js

في انتظار انتهاء عملية التحميل، سنقوم بإنشاء ملف جافاسكريبت جديد index.js داخل المجلد src/.
هذا الملف سيمثل نقطة الدخول (Entry point) بالنسبة لتطبيقنا.
لحد الساعة سنضع فيه هذا الكود البسيط :
class Alert { constructor(msg){ this.msg = msg; } show() { alert(this.msg); } } var _alert = new Alert("Hello World"); _alert.show();
1
2
3
4
5
6
7
8
9
10
11

class Alert {
constructor(msg){
this.msg = msg;
}

show() {
alert(this.msg);
}
}
var _alert = new Alert("Hello World");
_alert.show();

إنشاء الملف index.html

في نفس المكان، أي المجلد src/، سننشئ ملف html نقوم بتسميته index.html ونضمنه الكود التالي :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React from scratch</title> </head> <body> <div id="root"></div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React from scratch</title>
</head>

<body>
<div id="root"></div>
</body>

</html>

تعيين ملفي الدخول والإخراج في إعدادات Webpack

سنبدأ الآن في مرحلة إعداد Webpack.
لهذا الغرض، سنقوم بإنشاء ملف اسمه webpack.config.js في المجلد الجذر للمشروع (react-from-scratch)، وسنبدأ فيه إعداداتنا بتعيين المسار لكل من ملفي الدخول (Entry file) والإخراج (Output file).
const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" } };
1
2
3
4
5
6
7
8
9

const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js"
}
};

ملف الإخراج bundle.js ـ الذي يوجد في المجلد dist/ ـ هو الملف الذي سيجمع فيه Webpack كافة أكواد وملفات جافاسكريبت التي يستخدمها التطبيق. يعني أن الملف الذي سنقوم باستدعائه في الأخير في المتصفح هو bundle.js.
المجلد dist/ سيقوم Webpack بإنشائه تلقائيا بجوار src/.
إعداد ال loaders

محزم الوحدات webpack لحاله يستطيع فقط التعرف على ملفات جافاسكريبت وتحزيمها، وإذا أردنا تحزيم أنواع أخرى من الملفات مثل Scss ،Css أو حتى الصور فإن ويب باك سيكون في حاجة لمساعدته لكي يتمكن من التعامل مع مختلف تلك الأنواع من الملفات.
ال Loader هو الذي يؤدي هذه الخدمة في بيئة webpack، فكل نوع من الملفات يمكن استدعاؤه وتحزيمه كوحدة جافاسكريبت (Javascript Module) بالإستعانة بال Loader الموافق له.
const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] } };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};

css-loader هو المكلف باستخلاص أكواد CSS التي تم استدعاؤها باستخدام require أو import ثم يقوم بتجميعها على شكل string.
style-loader يأخذ هذا string ويقوم بوضعه داخل وسم <style> في ملف أو صفحة HTML (في مثالنا index.html).
لكي يتمكن Webpack من استخدامهما يجب أولا أن نقوم بتحميلهما من مستودع npm كما فعلنا سابقا مع babel-loader.
npm install css-loader style-loader --save-dev
1

npm install css-loader style-loader --save-dev

إعداد Babel

حتى نستطيع إعداد بابل لاستخدام ال Presets التي قمنا سابقا بتحميلها (env و react)، يجب علينا إنشاء ملف اسمه babelrc. في المجلد الرئيسي للمشروع، يعني بجوار package.json و webpack.config.js.
{ "presets": [ "env", "react" ] }
1
2
3
4
5
6

{
"presets": [
"env",
"react"
]
}

حان الوقت لتشغيل Webpack

لنقم بإضافة هذين السكريبتين إلى المنطقة المخصصة لذلك في ملف package.json :
"scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production" }
1
2
3
4

"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
}

السكريبت الأول (dev) يقوم بتشغيل webpack في وضع التطوير، والبارامتر watch– يعني بأنه كلما أجرينا تغييرا في الكود فإن Webpack سيقوم تلقائيا بإعادة عملية التجميع والتحزيم، يعني أننا لسنا مضطرين لإعادة تنفيذ الأمر npm run dev في كل مرة نقوم بها بإجراء تعديل على أحد الملفات المصدرية للمشروع.
أما السكريبت build فهو مسؤول عن تشغيل Webpack وفق وضع الإنتاج أو Production وما يعنيه ذلك من ضغط الأكواد والملفات إلخ…
الآن نستطيع تنفيذ الأمر dev كما يلي :
npm run dev
1

npm run dev

سنلاحظ بعد انتهاء عملية التحزيم إنشاء مجلد جديد اسمه dist/ وبداخله ملف جافاسكريبت باسم bundle.js، وفق إعداداتنا على مستوى ملف webpack.config.js هذا الملف يضم أكواد جافاسكريبت ES5 مدعومة ومفهومة من كافة المتصفحات الكبيرة.
إذن Webpack يشتغل كما يجب ومن دون أخطاء

قد يهمك أيضا : شرح أساسيات React.js – مكتبة جافاسكربت لتطوير واجهات المستخدم

لنقم بإنشاء مكون React.js الرئيسي لمشروعنا

في داخل المجلد components سنقوم بإنشاء ملف اسمه App.js ونضع فيه الشفرة البرمجية الآتية :
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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، لنقم بإنشاء هذا الملف في داخل المجلد styles، ولنضع فيه ما يلي :
h1 { font-family: arial; font-size: 48px; color: #444; text-align: center; }
1
2
3
4
5
6

h1 {
font-family: arial;
font-size: 48px;
color: #444;
text-align: center;
}

قمنا باستدعاء هذا الملف حتى نتأكد من أن كلا من css-loader و style-loader يعملان بشكل جيد.
لنعد الآن إلى الملف src/index.js الذي أنشأناه سابقا ووضعنا فيه كودا تجريبيا.
لنمسح ذلك الكود التجريبي ولنعوضه بما يلي :
import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App.js"; ReactDOM.render(<App />, document.getElementById("root"));
1
2
3
4
5

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";

ReactDOM.render(<App />, document.getElementById("root"));

تحميل الإضافة html-webpack-plugin

لحد الساعة كل ما يقوم به Webpack هو توليد المجلد dist/ وبداخله الملف bundle.js فقط!
أين هي صفحة html التي سنقوم بعرضها على المتصفح ؟
اطمئنوا، فإضافة html-webpack-plugin هنا لمساعدتنا في توليد ملف html داخل المجلد dist/ وتحقن فيه بشكل آلي ملف جافاسكريبت bundle.js المُخرَج.
npm install html-webpack-plugin --save-dev
1

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

بعد تحميل حزمة html-webpack-plugin، سيكون علينا إتمام عملية إعدادها من ملف 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: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ] };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

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

سيقوم ويب باك بإنشاء ملف اسمه index.html وفق القالب src/index.html وسيقوم بحقن السكريبت bundle.js أسفله بشكل آلي.
بعد تنفيذ الأمر npm run dev سنلاحظ بأنه تم فعلا توليد الملف index.html داخل المجلد dist وإلى جانبه طبعا ملف bundle.js.
عندما نفتح الملف dist/index.html في المتصفح سنرى النتيجة المتوقعة
كيفية إعداد مشروع React.js باستخدام

وإذا ألقينا نظرة على الشفرة المصدرية للصفحة فإننا سنرى ما يلي :
كيفية إعداد مشروع React.js باستخدام

تم حقن المكون <App> داخل العنصر div#root.
تمت إضافة محتوى الملف App.css إلى الوسم <style>.
تم استدعاء ملف الجافاسكريبت bundle.js أسفل الصفحة، تحديدا قبل إغلاق الوسم <body>.

نقطة سلبية

إلى الآن تطبيقنا يشتغل بشكل جيد، ولكننا مطالبون كما لاحظتم بفتح الملف index.html بشكل يدوي في المتصفح، وبعد كل عملية تعديل على الملفات المصدرية يجب تحديث الصفحة لكي نرى النتيجة كما أنه كما رأيتم، فتحنا الصفحة باستخدام البروتوكول //:file لأننا لا نتوفر على أي خادم ويب محلي (localhost). هذه الطريقة غير عملية وستثبت محدوديتها في العديد من الحالات (مثلا عند القيام بطلبات Ajax إلخ…).
الحل في Webpack-dev-server

هناك حزمة npm تقوم بتوفير كل تلك المزايا الناقصة عوض محاولة إضافتها بأنفسنا من الصفر، إنها حزمة webpack-dev-server.
npm install webpack-dev-server --save-dev
1

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

سنقوم بإجراء تعديل على السكريبت dev في ملف package.json، على اعتبار أن webpack-dev-server يهدف أولا وأساسا لجعل حياة المطور في وضع التطوير أكثر سهولة وعملية.
"scripts": { "dev": "webpack-dev-server --mode development --open --hot", ... }
1
2
3
4

"scripts": {
"dev": "webpack-dev-server --mode development --open --hot",
...
}

قمنا بإضافة معاملين اثنين :

open– : من أجل فتح المشروع بشكل آلي في المتصفح.
hot– : تحديث الصفحة أوتوماتيكيا بعد كل عملية تعديل على الكود.

إذن بعد تنفيذ الأمر npm run dev ، سيفتح المتصفح مشروعنا وتظهر لنا هذه الصفحة الجميلة

النهاية

هكذا نكون قد أعددنا مشروع React.js الخاص بنا من الصفر، وتعلمنا سويا الكثير من الأشياء التي تخص بالأساس Webpack ،babel وكذلك طريقة دمج خادم ويب في المشروع عن طريق الحزمة webpack-dev-server.
كل هذه الأدوات وغيرها تستخدم في كواليس الحزمة create-react-app لجعل مهمة المطورين في بدء مشاريع React.js سهلة ومنحهم الفرصة للتركيز أكثر على الكود عوض الإعدادات الجانبية.
ولقد بينت في مقدمة هذا الدرس بأن أفضل وسيلة لبدء مشروع React.js هي عن طريق create-react-app، وهدفنا الأول والأخير من هذا الدرس هو معرفة كيفية عمل هذه الحزمة في ما وراء الستار واكتشاف مزايا webpack الكثيرة.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 06:04 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 كيفية إعداد مشروع React.js باستخدام Webpack 4 و Babel كيفية إعداد مشروع React.js باستخدام Webpack 4 و Babel معظمنا ممن سبق لهم التعامل مع مكتبة React.js يعلمون بأن أفضل طريقة لبدء أي مشروع هي باستخدام الحزمة create-react-app، وهي الطريقة الرسمية الموصى بها. لا خلاف على أن هذه الحزمة قيمة جدا وتمكن المطورين من بدء مشاريع React.js بدون مجهود يذكر ومن دون أي إعدادات مسبقة وبالتالي التركيز على React.js فقط. ولكن، ماذا لو أردنا فهم كل ما يدور في كواليس تلك الحزمة ؟ ماذا لو أردنا إعداد مشروع React.js بأنفسنا ومعرفة كيفية اشتغال هذه المكتبة مع محزم الوحدات الأشهر Webpack ؟ حزمة create-react-app صممت لجعلك تبدأ العمل مباشرة وتترك لها مهمة إعداد وبناء المشروع، ولا يهمها أن تفهم كيف يقوم Webpack بتحويل أكواد JSX إلى جافاسكريبت عادي أو طريقة استدعاء واستيراد ملفات CSS من داخل مكونات React عن طريق import إلخ… إذا أردت أن تفهم كل هذه الأمور وتتعلم كيفية اشتغالها وتناغمها، فعليك إذن أن تقوم بإعداد مشروعك من الصفر. لهذا الغرض نحن هنا اليوم سنتعلم معا كيفية إعداد مشروع React.js باستخدام محزم الوحدات Webpack 4. هيا بنا نبدأ العمل أولا لنفتح نافذة الأوامر السطرية ونقوم بإنشاء مجلد اسمه react-from-scratch وبداخله مجلد واحد اسمه src يضم بدوره مجلدين اثنين : components و styles. mkdir react-from-scratch cd react-from-scratch mkdir -p src/components src/styles 1 2 3 mkdir react-from-scratch cd react-from-scratch mkdir -p src/components src/styles لتهيئة المشروع، سنقوم بتنفيذ الأمر التالي داخل المجلد react-from-scratch وذلك جريا على عادتنا في جميع المشاريع التي تستخدم مدير الحزم npm : npm init -y 1 npm init -y بعد تنفيذ هذا الأمر سيتولد الملف الغني عن التعريف package.json : { "name": "react-from-scratch", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 1 2 3 4 5 6 7 8 9 10 11 12 { "name": "react-from-scratch", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } تحميل Webpack Webpack ـ كما رأينا في مقال سابق مفصل ـ هو محزم وحدات Module bundler يمكننا من تحزيم وجمع ملفات مشروعنا في ملف واحد (في الغالب). دعونا نقوم بتحميل وتثبيت ويب باك في مشروعنا : npm install Webpack webpack-cli --save-dev 1 npm install Webpack webpack-cli --save-dev هذا الأمر سيقوم بتحميل كل من حزمتي Webpack و webpack-cli. الأولى تضم الوظائف الأساسية لمحزم الوحدات Webpack والثانية تتيح لنا إمكانية استخدام أوامر Webpack من نافذة الأوامر السطرية Command line. تحميل مكتبة React.js npm install react react-dom --save 1 npm install react react-dom --save تحميل بابل Babel حتى تعمل مكتبة React.js بشكل جيد، نحن مطالبون بتثبيت الأداة Babel من أجل تحويل (Transpile) أكواد جافاسكريبت ES6 و JSX إلى أكواد جافاسكريبت ES5 مدعومة من كافة المتصفحات. npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev 1 npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev قمنا هنا بتحميل 4 حزم : babel-core : الحزمة التي تحتوي على الشفرة المصدرية لنواة بابل. babel-loader : هذه الحزمة تمثل ال loader الذي يستخدمه Webpack لكي يعمل بتوافقية كاملة مع Babel. يعني أن Webpack يستعين ببابل في عملية Transpiling قبل أن يقوم بعملية التجميع أو التحزيم ( Bundling ). babel-preset-env : الحزمة التي تمكن نواة بابل من تحويل أكواد جافاسكريبت ES6 إلى أكواد جافاسكريبت ES5. babel-preset-react : مسؤولة عن عملية تحويل أكواد JSX إلى جافاسكريبت. إنشاء الملف index.js في انتظار انتهاء عملية التحميل، سنقوم بإنشاء ملف جافاسكريبت جديد index.js داخل المجلد src/. هذا الملف سيمثل نقطة الدخول (Entry point) بالنسبة لتطبيقنا. لحد الساعة سنضع فيه هذا الكود البسيط : class Alert { constructor(msg){ this.msg = msg; } show() { alert(this.msg); } } var _alert = new Alert("Hello World"); _alert.show(); 1 2 3 4 5 6 7 8 9 10 11 class Alert { constructor(msg){ this.msg = msg; } show() { alert(this.msg); } } var _alert = new Alert("Hello World"); _alert.show(); إنشاء الملف index.html في نفس المكان، أي المجلد src/، سننشئ ملف html نقوم بتسميته index.html ونضمنه الكود التالي : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React from scratch</title> </head> <body> <div id="root"></div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React from scratch</title> </head> <body> <div id="root"></div> </body> </html> تعيين ملفي الدخول والإخراج في إعدادات Webpack سنبدأ الآن في مرحلة إعداد Webpack. لهذا الغرض، سنقوم بإنشاء ملف اسمه webpack.config.js في المجلد الجذر للمشروع (react-from-scratch)، وسنبدأ فيه إعداداتنا بتعيين المسار لكل من ملفي الدخول (Entry file) والإخراج (Output file). const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" } }; 1 2 3 4 5 6 7 8 9 const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" } }; ملف الإخراج bundle.js ـ الذي يوجد في المجلد dist/ ـ هو الملف الذي سيجمع فيه Webpack كافة أكواد وملفات جافاسكريبت التي يستخدمها التطبيق. يعني أن الملف الذي سنقوم باستدعائه في الأخير في المتصفح هو bundle.js. المجلد dist/ سيقوم Webpack بإنشائه تلقائيا بجوار src/. إعداد ال loaders محزم الوحدات webpack لحاله يستطيع فقط التعرف على ملفات جافاسكريبت وتحزيمها، وإذا أردنا تحزيم أنواع أخرى من الملفات مثل Scss ،Css أو حتى الصور فإن ويب باك سيكون في حاجة لمساعدته لكي يتمكن من التعامل مع مختلف تلك الأنواع من الملفات. ال Loader هو الذي يؤدي هذه الخدمة في بيئة webpack، فكل نوع من الملفات يمكن استدعاؤه وتحزيمه كوحدة جافاسكريبت (Javascript Module) بالإستعانة بال Loader الموافق له. const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] } }; css-loader هو المكلف باستخلاص أكواد CSS التي تم استدعاؤها باستخدام require أو import ثم يقوم بتجميعها على شكل string. style-loader يأخذ هذا string ويقوم بوضعه داخل وسم <style> في ملف أو صفحة HTML (في مثالنا index.html). لكي يتمكن Webpack من استخدامهما يجب أولا أن نقوم بتحميلهما من مستودع npm كما فعلنا سابقا مع babel-loader. npm install css-loader style-loader --save-dev 1 npm install css-loader style-loader --save-dev إعداد Babel حتى نستطيع إعداد بابل لاستخدام ال Presets التي قمنا سابقا بتحميلها (env و react)، يجب علينا إنشاء ملف اسمه *babelrc.* في المجلد الرئيسي للمشروع، يعني بجوار package.json و webpack.config.js. { "presets": [ "env", "react" ] } 1 2 3 4 5 6 { "presets": [ "env", "react" ] } حان الوقت لتشغيل Webpack لنقم بإضافة هذين السكريبتين إلى المنطقة المخصصة لذلك في ملف package.json : "scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production" } 1 2 3 4 "scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production" } السكريبت الأول (dev) يقوم بتشغيل webpack في وضع التطوير، والبارامتر watch– يعني بأنه كلما أجرينا تغييرا في الكود فإن Webpack سيقوم تلقائيا بإعادة عملية التجميع والتحزيم، يعني أننا لسنا مضطرين لإعادة تنفيذ الأمر npm run dev في كل مرة نقوم بها بإجراء تعديل على أحد الملفات المصدرية للمشروع. أما السكريبت build فهو مسؤول عن تشغيل Webpack وفق وضع الإنتاج أو Production وما يعنيه ذلك من ضغط الأكواد والملفات إلخ… الآن نستطيع تنفيذ الأمر dev كما يلي : npm run dev 1 npm run dev سنلاحظ بعد انتهاء عملية التحزيم إنشاء مجلد جديد اسمه dist/ وبداخله ملف جافاسكريبت باسم *bundle.js، وفق إعداداتنا على مستوى ملف webpack.config.js* هذا الملف يضم أكواد جافاسكريبت ES5 مدعومة ومفهومة من كافة المتصفحات الكبيرة. إذن Webpack يشتغل كما يجب ومن دون أخطاء قد يهمك أيضا : شرح أساسيات React.js – مكتبة جافاسكربت لتطوير واجهات المستخدم لنقم بإنشاء مكون React.js الرئيسي لمشروعنا في داخل المجلد components سنقوم بإنشاء ملف اسمه App.js ونضع فيه الشفرة البرمجية الآتية : 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; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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، لنقم بإنشاء هذا الملف في داخل المجلد styles، ولنضع فيه ما يلي : h1 { font-family: arial; font-size: 48px; color: #444; text-align: center; } 1 2 3 4 5 6 h1 { font-family: arial; font-size: 48px; color: #444; text-align: center; } قمنا باستدعاء هذا الملف حتى نتأكد من أن كلا من css-loader و style-loader يعملان بشكل جيد. لنعد الآن إلى الملف src/index.js* الذي أنشأناه سابقا ووضعنا فيه كودا تجريبيا. لنمسح ذلك الكود التجريبي ولنعوضه بما يلي : import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App.js"; ReactDOM.render(<App />, document.getElementById("root")); 1 2 3 4 5 import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App.js"; ReactDOM.render(<App />, document.getElementById("root")); تحميل الإضافة html-webpack-plugin لحد الساعة كل ما يقوم به Webpack هو توليد المجلد dist/ وبداخله الملف bundle.js فقط! أين هي صفحة html التي سنقوم بعرضها على المتصفح ؟ اطمئنوا، فإضافة html-webpack-plugin هنا لمساعدتنا في توليد ملف html داخل المجلد dist/ وتحقن فيه بشكل آلي ملف جافاسكريبت *bundle.js* المُخرَج. npm install html-webpack-plugin --save-dev 1 npm install html-webpack-plugin --save-dev بعد تحميل حزمة html-webpack-plugin، سيكون علينا إتمام عملية إعدادها من ملف 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: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ] }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ] }; سيقوم ويب باك بإنشاء ملف اسمه index.html وفق القالب src/index.html وسيقوم بحقن السكريبت bundle.js أسفله بشكل آلي. بعد تنفيذ الأمر npm run dev سنلاحظ بأنه تم فعلا توليد الملف index.html داخل المجلد dist وإلى جانبه طبعا ملف bundle.js. عندما نفتح الملف dist/index.html في المتصفح سنرى النتيجة المتوقعة وإذا ألقينا نظرة على الشفرة المصدرية للصفحة فإننا سنرى ما يلي : تم حقن المكون <App> داخل العنصر div#root. تمت إضافة محتوى الملف App.css إلى الوسم <style>. تم استدعاء ملف الجافاسكريبت bundle.js أسفل الصفحة، تحديدا قبل إغلاق الوسم <body>. نقطة سلبية إلى الآن تطبيقنا يشتغل بشكل جيد، ولكننا مطالبون كما لاحظتم بفتح الملف index.html بشكل يدوي في المتصفح، وبعد كل عملية تعديل على الملفات المصدرية يجب تحديث الصفحة لكي نرى النتيجة كما أنه كما رأيتم، فتحنا الصفحة باستخدام البروتوكول //:file لأننا لا نتوفر على أي خادم ويب محلي (localhost). هذه الطريقة غير عملية وستثبت محدوديتها في العديد من الحالات (مثلا عند القيام بطلبات Ajax إلخ…). الحل في Webpack-dev-server هناك حزمة npm تقوم بتوفير كل تلك المزايا الناقصة عوض محاولة إضافتها بأنفسنا من الصفر، إنها حزمة webpack-dev-server. npm install webpack-dev-server --save-dev 1 npm install webpack-dev-server --save-dev سنقوم بإجراء تعديل على السكريبت dev في ملف package.json، على اعتبار أن webpack-dev-server يهدف أولا وأساسا لجعل حياة المطور في وضع التطوير أكثر سهولة وعملية. "scripts": { "dev": "webpack-dev-server --mode development --open --hot", ... } 1 2 3 4 "scripts": { "dev": "webpack-dev-server --mode development --open --hot", ... } قمنا بإضافة معاملين اثنين : open– : من أجل فتح المشروع بشكل آلي في المتصفح. hot– : تحديث الصفحة أوتوماتيكيا بعد كل عملية تعديل على الكود. إذن بعد تنفيذ الأمر npm run dev ، سيفتح المتصفح مشروعنا وتظهر لنا هذه الصفحة الجميلة النهاية هكذا نكون قد أعددنا مشروع React.js الخاص بنا من الصفر، وتعلمنا سويا الكثير من الأشياء التي تخص بالأساس Webpack ،babel وكذلك طريقة دمج خادم ويب في المشروع عن طريق الحزمة webpack-dev-server. كل هذه الأدوات وغيرها تستخدم في كواليس الحزمة create-react-app لجعل مهمة المطورين في بدء مشاريع React.js سهلة ومنحهم الفرصة للتركيز أكثر على الكود عوض الإعدادات الجانبية. ولقد بينت في مقدمة هذا الدرس بأن أفضل وسيلة لبدء مشروع React.js هي عن طريق create-react-app، وهدفنا الأول والأخير من هذا الدرس هو معرفة كيفية عمل هذه الحزمة في ما وراء الستار واكتشاف مزايا webpack الكثيرة. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كيفية إعداد منتدى دعم فني باستخدام إضافة Support System	مهرة النجدية	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	22-07-2019 07:15 PM
دليلك الشامل حول النظام البيئي لِ “جافاسكريبت”	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:50 PM
ما هو محزم الوحدات webpack	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:21 PM
كيفية تنسيق المكونات في React.js	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:05 PM
طرق كسب المال عبر الإنترنت باستخدام ووردبريس	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	27-03-2019 07:04 PM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)