آموزش یک React App را با استفاده از Webpack و Babel پیکربندی کنید
Configure a React App using Webpack and Babel
هنگامی که شروع به یادگیری در مورد کتابخانه React می کنید، اسناد رسمی یک ابزار خط فرمان را برای ایجاد داربست برنامه React ارائه می دهد. هنگام استفاده از چنین ابزار خط فرمان، یک پوشه ریشه به همراه تعدادی فایل و پیکربندی بدون توضیح بیشتر درباره چیستی یا نحوه ایجاد آن ایجاد می‌شود. اگر نگاهی بیندازید کلمات خاصی مانند webpack، webpack.config.js، babel، module.exports و غیره ظاهر می شوند. اگر می خواهید بدانید آن چیزهای عجیب و غریب چیست، این دوره برای شما مناسب است!!!
یک پروژه React را با استفاده از Webpack
پیکربندی کنیدپاراگرافهای بعدی نحوه پیکربندی برنامه React را با استفاده از Webpack خلاصه می‌کنند:
NodeJs
را نصب کنیدبرای نصب NodeJs در رایانه Widows، می‌توانید از برنامه‌ای به نام Node Version Manager برای Windows استفاده کنید. چنین ابزاری هر نسخه NodeJS را به همراه Node Package Manager نصب می‌کند که ابزار خط فرمانی است که برای دانلود و نصب وابستگی‌های ExpressJS مانند Express، React، React-dom، webpack و بسیاری دیگر استفاده می‌شود.
یک دایرکتوری ریشه ایجاد کنید و npm init را در خط فرمان
اجرا کنیدعملیات بسیاری در کنسول ویندوز انجام می شود. یک نمونه جدید از کنسول باز کنید و npm init را اجرا کنید. این دستور فایل package.json را ایجاد می کند که حاوی ابرداده برای برنامه است، مانند نام فایلی که حاوی پیکربندی برای سرور است.
دو فهرست فرعی ایجاد کنید
دو زیرمجموعه اصلی وجود دارد:
- dist (توزیع)
- src (منبع)
دایرکتوری src حاوی تمام کدها و دارایی هایی است که در حالی که هر بار که وب پک در کنسول اجرا می شود، پوشه dist توسط Webpack به روز می شود، ویرایش می شود. به عبارت دیگر، فایل هایی که روی آنها کار خواهید کرد در دایرکتوری منبع ذخیره می شوند و دایرکتوری توزیع باید فقط توسط Webpack کنترل شود.
وابستگی ها یا بسته ها را نصب کنید
این پروژه به بسته‌ها یا وابستگی‌های زیر نیاز دارد:
- expressjs
- react و react-dom
- webpack و webpack-cli
- @babel/core، @babel-cli، @babel-polyfill، @babel/preset-env و @babel/preset-react
- babel-loader، file-loader، style-loader، css loader، html-loader
- html-webpack-plugin، clean-webpack-plugin
فایلی با نام server.js
ایجاد کنیداین فایل حاوی پیکربندی برای وب سرور شما است و از چارچوب expressJS استفاده می‌کند.
فایل webpack.config.js را ایجاد و پیکربندی کنید
این فایل جاوا اسکریپت پیکربندی استفاده شده توسط Webpack را صادر می کند. شی پیکربندی باید ویژگی های زیر را داشته باشد:
- ورودی
- خروجی
- افزونه ها
- module.rules
- حالت
دارایی‌ها را در فهرست منبع ذخیره کنید
این فهرست باید حاوی فایلی با پسوند jsx باشد که حاوی کد برنامه React باشد. هر تصویری که دوست دارید باید یک فایل css وجود داشته باشد و یک فایل html که به عنوان الگو برای تولید فایل html نهایی استفاده می شود. به یاد داشته باشید، پس از اجرای دستور npx webpack در کنسول، فایل تصویر، فایل css و کد react در یک فایل جاوا اسکریپت باندل می شوند. در نهایت این فایل جاوا اسکریپت به قالب html متصل می شود و هر دو (بسته و قالب) به دایرکتوری توزیع ارسال می شوند.
webpack را اجرا کنید و سرور را راه اندازی کنید
بعد از انجام تنظیمات در Webpack، npx webpack را در کنسول اجرا کنید. سرور را با دستور node server.js شروع کنید.
پیوندها
درس ها Lessons
-
راه اندازی Babel که کد React را به جاوا اسکریپت ترجمه می کند Setting up Babel which translates React code into Javascript
-
فایل جاوا اسکریپت را با استفاده از Webpack به HTML ضمیمه کنید Attach Javascript file into HTML using Webpack
-
افزودن تصاویر با استفاده از Webpack Adding images by using Webpack
-
یک سرور با استفاده از ExpressJS ایجاد کنید Create a Server using ExpressJS
-
با Webpack استایل های CSS را مدیریت کنید Handle CSS styles with Webpack
-
آخرین پیشرفت ها در فایل پیکربندی Webpack Last improvements to the Webpack configuration file
-
خوش آمدی!!! یک برنامه React را با استفاده از Webpack از ابتدا پیکربندی کنید Welcome!!! Configure a React app using Webpack from scratch
-
درک کنید که React و Webpack چگونه با هم کار می کنند Understand how React and Webpack work together
-
کد React را با استفاده از Webpack و Babel کوچک کنید Minify React code using Webpack and Babel
-
استفاده از Babel برای ترجمه React App به Cross-Browser Javascript Using Babel to translate React App into Cross-Browser Javascript
نمایش نظرات
نظری ارسال نشده است.
https://donyad.com/d/f11926
آموزش آیا باید یک هماهنگ کننده عروسی استخدام کنید؟
Should You Hire a Wedding Coordinator?
اول از همه، نامزدی شما را تبریک می گویم! بسیار هیجان انگیز است که برنامه ریزی کنید و تصمیم بگیرید که می خواهید عروسی خود چگونه باشد. من فرض می کنم تو او هستی ..
آموزش زاغی مدیا با گواش و مداد رنگی
Mixed Media Magpie in Gouache and Coloured Pencils
"در این کلاس هنری، من به شما نشان خواهم داد و به شما یاد خواهم داد که چگونه کتاب طراحی خود را با تصاویر ساده با مدادهای گواش و آبرنگ، یک نقاشی در یک نقاشی پر کنید.
آموزش اثر هنری ماندالا: پروانه
Mandala Artwork: Butterfly
"این کلاس برای ذهن های خلاقی ساخته شده است که پر از هنر و خلاقیت هستند. این کلاس به شما کمک می کند تا یک هنر اصیل پر از خلاقیت را توسعه دهید."
آموزش طراحی برای مبتدیان با استفاده از اشکال و تکنیک های ساده
Drawing for Beginners Using Simple Shapes and Techniques
«هنرمند درونی خود را رها کنید: ماجراجویی نهایی طراحی! آیا تا به حال به یک صفحه خالی خیره شده اید و متقاعد شده اید که طراحی فقط کار شما نیست؟ برای آما بودن آماده شوید. .."
Raymundo CH
سلام، من ریموندو هستم. من توسعه وب را دوست دارم زیرا همیشه یک چالش است. یادگیری زبان های برنامه نویسی سرگرم کننده است و برای ذهن یک چالش است.
از زمانی که چند سال پیش در مورد NodeJs شنیدم احساس کنجکاوی کردم زیرا آنها گفتند که می توان یک برنامه وب کامل را تنها با استفاده از جاوا اسکریپت ایجاد کرد. خیلی جالب بود.
در ابتدا درک NodeJs سخت بود زیرا نحوه کارکرد آن با رویکرد سنتی بسیار متفاوت است، حتی نحوه استقرار و تغییرات برنامه و شرکت هایی که برنامه شما را ذخیره می کنند مجموعه ای از محصولات متفاوت و عجیب را ارائه می دهند!! بنابراین برای من یک ماجراجویی بود.
امروزه من NodeJs را درک کرده ام و اینجا هستم تا دانش خود را به روشی ساده با شما به اشتراک بگذارم. امیدوارم از آموزش های ویدیویی من لذت ببرید و لطفاً بازخورد خود را برای من ارسال کنید!!!
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.