4.3 KiB
title | localeTitle |
---|---|
React with Webpack File Structure | تتفاعل مع بنية ملف Webpack |
الآن حان الوقت لإعداد هيكل الملف الخاص بنا قبل كتابة أي رمز.
أولاً ، دعنا ننشئ ملفًا جديدًا باسم .gitignore
:
touch .gitignore
سيحتوي هذا الملف على قائمة بكافة الملفات والمجلدات التي لن يتم تضمينها عند دفع مشروعنا إلى GitHub. يوجد موقع ويب يخدم كود .gitignore
لملفات .gitignore
، وهو أمر مفيد للغاية ، لأنه في كثير من الأحيان ، يمكن أن يكون ملف .gitignore
طويلًا ومطولًا ، وقد ننسى بعض الملفات أو المجلدات التي نريد أن يتجاهلها Git.
انتقل إلى https://www.gitignore.io/ واكتب Node
في شريط البحث ، ثم انقر على " Generate
. سيؤدي ذلك إلى إنشاء ملف يبدو كالتالي:
`# Created by https://www.gitignore.io/api/node
Node
Logs
logs .log npm-debug.log
Runtime data
pids *.pid *.seed
Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
Coverage directory used by tools like istanbul
coverage
Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
node-waf configuration
.lock-wscript
Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
Dependency directories
node_modules jspm_packages
Optional npm cache directory
.npm
Optional REPL history
.node_repl_history `
الآن يمكننا نسخ ولصق ذلك في ملف .gitignore
بنا.
لاحظ أن .gitignore
ملف يجب أن تتضمن دائما node_modules
. هذا أمر في غاية الأهمية ، لأننا لا نريد تضمين مجلد node_modules
بنا مع node_modules
Git ، حيث أنها تستهلك مساحة كبيرة على القرص ، ويمكن تثبيتها بتثبيت npm install
، والذي يشير إلى package.json
لدينا.
معظم الملفات والمجلدات المدرجة في ملف .gitignore
بنا غير موجودة في مشروعنا حتى الآن ، ولكن إذا فعلت ذلك في المستقبل ، فلن يتم تضمينها في التزامات Git الخاصة بنا ، وهي مهمة ومفيدة ، لأننا يجب أن نكون انتقائي حول ما نرتكبه.
الآن ، نحتاج إلى إنشاء مجلد جديد يحتوي على محتويات شفرة التطوير الخاصة بنا. دعونا نسميها src
:
mkdir src
بعد ذلك ، نحتاج إلى إنشاء مجلد يحتوي على ملفات نستخدمها لأغراض الإنتاج . سنسمي هذا المجلد dist
:
mkdir dist
الآن بعد أن قمنا بتثبيت الحزم الخاصة بنا dist
مجلدات src
و dist
فارغة ، ستبدو الشجرة كما هي (لا تشمل .gitignore
، وهو ملف مخفي):
. ├── dist ├── node_modules ├── package.json ├── src └── webpack.config.js
الآن ، يمكننا إنشاء مجلد js
جديد ينتقل إلى مجلد src
بنا. سيحتوي هذا على جميع رموز التفاعل:
mkdir src/js
يمكننا المضي قدما وخلق client.js
فارغة في src/js
لدينا. سيكون هذا هو ملفنا الرئيسي React:
touch src/js/client.js
نحتاج أيضًا إلى index.html
لا يجب أن يدخل مجلد src
بنا ، بل إلى مجلد dist
بنا ، لأنه مطلوب لإنتاج التطبيق لدينا:
touch dist/index.html
الآن ، تبدو شجرتنا بشيء من هذا القبيل:
. ├── dist │ └── index.html ├── node_modules ├── package.json ├── src │ └── js │ └── client.js └── webpack.config.js