7.7 KiB
| title | localeTitle |
|---|---|
| Writing Code for Your Es6 React with Webpack Project | كتابة قانون لك Es6 React مع Webpack Project |
شعبة نظم و / index.html
يمكننا الآن فتح dist/index.html . ستكون هذه الصفحة HTML الوحيدة التي تُحمِّل تطبيقنا بالكامل. لا نحتاج إلى الكثير من الشفرات على الإطلاق لهذا الملف ، وهو ما يكفي فقط إلى:
- اضبط عنصرًا لـ React DOM في
src/js/client.js. - اربط ملف جافا سكريبت الخاص بنا (الذي لم يكن موجودًا حتى الآن).
لذلك ، هذا ما سيبدو عليه ملف dist/index.html :
``
<html lang="en"> <head> </head> </html> ``قد تتساءل عن سبب bundle.js هذه الصفحة بـ bundle.js عندما يكون كل ما لدينا حتى الآن هو src/js/client.js . سيتم الكشف عن هذا في وقت لاحق عندما نكتب ملف تكوين Webpack الخاص بنا.
SRC / شبيبة / client.js
الآن حان الوقت لكتابة بعض رموز React. تمامًا كما هو الحال في ملف dist/index.html ، dist/index.html الآن ما يكفي من الشفرات للحصول على التطبيق ، لذا لن يكون هناك الكثير من الشفرات المطلوبة على الإطلاق:
`import React from 'react'; import ReactDOM from 'react-dom';
class Main extends React.Component { render() { return (
This is one cool app!
const app = document.getElementById('app'); ReactDOM.render(
, app); `الرمز الذي يشبه عناصر HTML هو في الواقع JSX ، وهو جزء من React.
لشرح ما يجري في هذا الملف ، سنقوم بتفصيله:
-
أولا، نحن استيراد
ReactوReactDOM. هذه مطلوبة لأي ملف React يتم استخدامه لحقن الكود في DOM. TheReactDOMهو DOM ظاهري ، وهو ليس نفس الشيء مثل نموذج كائن المستند القياسي. -
- بعد ذلك ، نقوم بإنشاء فئة React. تمت إضافة فئات إلى JavaScript في ES6. لذلك ، هذه هي طريقة ES6 لكتابة فئة React ، ولكن بالطبع يمكننا كتابة واحدة في ES5 أيضًا .
كل فئة React لديه طريقة render . في هذه الحالة ، return طريقة render إلى عنصر div JSX. هذا ما سنراه في كل ملف React. يمكن أن تحتوي الطبقة الأساليب الأخرى التي يجب أن تظهر قبل render طريقة، والذي يذهب دائما في الجزء السفلي من فئة.
- أخيرًا ، نحن نربط React بـ
index.htmlلدينا. قمنا بتعيينappليكون موقعًا حيثما أردنا أن يتم حقن شفرة React الخاص بنا. وأخيرًا ، باستخدام ReactDOM ، نقوم بحقن المكون الذي كتبناه ،<Main />، في التطبيق ، وهو في هذه الحالةdivمعidapp.
webpack.config.js
ما زال هناك ملف واحد آخر يكتب قبل أن يصبح مشروعنا جاهزًا. إنه ملف تكوين Webpack. في البداية ، يمكن أن تكون ملفات webpack.config.js مربكة للنظر ، ولكن في كثير من الأحيان ، ليست معقدة كما تبدو.
في هذه الحالة ، في أبسط webpack.config.js ، يقوم webpack.config.js بتصدير كائن له الخصائص التالية:
| الملكية الدور | |
|---|---|
| دخول | ما يدور في: نقطة دخول التطبيق. في هذه الحالة ، يكون src/js/client.js . |
| الانتاج | ما الذي سيخرج: ما ستقوم حزمة Webpack بتجميعه لنا. في هذه الحالة ، كل ما نسميه في webpack.config.js . |
| رافعات | المهام التي ستنفذها Webpack. |
هذا ما يبدو عليه ملف webpack.config.js :
`var path = require('path'); var srcPath = path.join(__dirname, 'src'); var buildPath = path.join(__dirname, 'dist');
module.exports = { context: srcPath, entry: path.join(srcPath, 'js', 'client.js'), output: { path: buildPath, filename: "bundle.js" }, module: { loaders: { test: /.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react', 'es2015'] } } ] } }; `
مرة أخرى ، دعنا نكسرها بحيث يتضح ما يفعله هذا الملف:
-
أولاً ، نحن نطلب وحدة
pathNodeJS بحيث يمكننا التعامل مع مسارات الملفات ، والتي تكون مطلوبة لتعيينcontextالكائن. من المهم جدًا استخدام هذه الوحدة بدلاً من محاولة وربط الدلائل بالسلاسل ، لأن بعض أنظمة التشغيل ، مثل Windows ، تتطلب ذلك. -
ثم ، نحدد
srcPathوbuildPathباستخدام وحدةpathالتيbuildPathفقط. سيضمن القيام بذلك لدينا [جاف ، رمز قابل للقراءة. -
حان الوقت الآن لكتابة الكائن. الخصائص التي سنستخدمها كلها ذات صلة بـ Webpack.
- نقدم أولاً سياقًا يحدد ببساطة مكان تطبيقنا. إنه يشير إلى متغير
contextالذي أنشأناه للتو. - ثم نحدد نقطة الدخول ، وهو بالطبع تطبيق
src/js/client.jsسابقًا (src/js/client.js). - بعد ذلك ، نحدد اسم الملف المجمّع الذي ينشئه Webpack عند تشغيله. في هذه الحالة ، يكون
dist/bundle.js. تبدو مألوفة؟ يجب أن تفعل ، لأن هذا هو الملف الذي نربطه منdist/index.htmlلدينا! - وأخيرًا ، تأتي خاصية
module، التي تحتوي على مصفوفة ،loaders، تحتوي حاليًا على كائن واحد. تخبر خصائص هذا الكائن Webpack ما هي ملفات جافا سكريبت التي يتم كتابتها مع ES6 و React ، بحيث يمكن تشغيل محمل لها ،babelوفقا لذلك عند تشغيلwebpack.config.js. هذا هو رمز المعيار الرئيسي الذي يمكننا رؤيته في الصفحة التمهيديّة على Babel Loader .
- نقدم أولاً سياقًا يحدد ببساطة مكان تطبيقنا. إنه يشير إلى متغير
إذا كان webpack.config.js مربكًا الآن ، فلا داعي للقلق ، طالما أنك تفهم ما هو موجود فعله.