نوشته های علی کمیجانی https://virgool.io/feed/@akpa125 از دوران راهنمایی که اولین کامپیوتر رو دیدم همیشه کنجکاو بودم که چجوری نرم افزارها درست میشن...آخرش برنامه نویس شدم:) fa 2026-06-08 02:13:51 https://files.virgool.io/upload/users/66929/avatar/BuudxQ.png?height=120&width=120 علی کمیجانی https://virgool.io/@akpa125 وب پک چیست و چرا باید از آن استفاده کنیم (قسمت سوم) https://virgool.io/@akpa125/what-is-webpack-and-why-use-it-part-3-u1azj6ulqjzo خب تو دوتا قسمت قبلی یاد گرفتیم وب پک چیه و چطور باید وب پک رو راه بندازیم و براش فایل کانفیگ نوشتیم تو این قسمت میخوایم یاد بگیریم چجوری فایل های css و media و ... رو مدیریت کنیم.قبل از شروع اگه مطالب قبلی یادت رفته بهتره یه سری به لینک های زیر بزنی :وب پک چیست و چرا باید از آن استفاده کنیم (قسمت اول)<br/>وب پک چیست و چرا باید از آن استفاده کنیم (قسمت دوم)خب اگه پروژه قبلی رو دارید تغییرات زیر رو توش انجام بدید و اگه ندارید هم مشکلی نیست یه پروژه با نود ایجاد کنید یه پوشه بسازید به نام dist و توش یه فایل با نام index.html بسازیدdist/index.html<!DOCTYPE html> <html> <head> <meta charset=&quotutf-8&quot /> <title>Asset Management</title> </head> <body> <script src=&quotbundle.js&quot> </body> </html>خب داخل روت پروژه فایل کانفیگ رو بسازیدwebpack.config.jsconst path = require('path'); module.exports = { entry: './src/index.js', output: { + filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, };برای استفاده از css توی ماژول های js احتیاج داریم تا دو تا کتابخونه style-loader و css-loader رو نصب کنیم و فایل کانفیگ رو کمی کنیم.npm install --save-dev style-loader css-loaderwebpack.config.jsconst path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, + module: { + rules: [ + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'], + }, + ], + }, };خب بریم سراغ توضیحات ما از ویژگی ماژول لودر وب پک داریم استفاده میکنیم این ویژگی به این نحوه که میاد یه سری rule رو روی فایل ها تست میکنه اگه مثبت بود اون فایل ها رو پاس میده به کتابخونه هایی که ما تو قسمت use نوشتیم و خروجی اونها رو میریزه تو پوشه dist. اگه به قسمت test نگاه کنید با کمی دقت متوجه میشید که در واقع یه الگوی رجکس نوشته شده رجکس یه کتابخونه برای پردازش متن هست و تو این مثال ما داریم میگیم هر فایلی که آخرش پسوند .css رو داشت پاس بده به style-loader و بعدش خروجی رو پاس بده به css-loader و بعد اون کارت تمومه. در واقع ما برای هر تیپ فایل باید یه رول خاص بنویسیم (البته اگه قراره دستکاریش کنیم).بریم که یکم استایل به پروژه بدیم برید داخل پوشه src یه فایل index.js بسازید و یه فایل style.csssrc/style.css.hello { color: red; }src/index.js import './style.css'; function component() { const element = document.createElement('div'); element('hello word') element.classList.add('hello'); return element; } document.body(component()); حالا npx run build رو بزنید و نتیجه زیبا که نوشته hello word با فونت قرمز هست رو ببینید:) نکته جالب اینکه اگه شما view page source رو بزنید هیچ استایلی رو نباید ببینید چون این استایل و محتویات به صورت داینامیک با جاوا اسکریپت به کد شما اضافه شده.مدیریت فونت و عکسبرای اینکه وب پک بتونه عکس و فونت های ما رو لودبکنه دیگه کار زیادی نداریم کافیه دوتا rule جدید بنویسیمwebpack.config.jsconst path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, + { + test: /\.(png|svg|jpg|jpeg|gif)$/i, + type: 'asset/resource', + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/i, + type: 'asset/resource', + }, ], }, };رول اول برای عکس ها و رول دوم برای فونت هاست حالا کافیه توی پوشه src عکس ها و فونت ها رو بزارید و آدرس رو بصورت نسبی توی فایل های css یا js وارد کنید بعد بیلد کردن خود وب پک اون عکس ها و فونت ها رو میبره تو پوشه dist/asset/resource و آدرسش رو هم توی فایل ه جاوا درست میکنهsrc/style.css+@font-face { + font-family: 'MyFont'; + src: url('./my-font.woff2') format('woff2'), + url('./my-font.woff') format('woff'); + font-weight: 600; + font-style: normal; +} + .hello { color: red; + font-family: 'MyFont'; background: url('./background.png'); }به جای my-font اسم فونت خودتون رو بدید و اسم عکس هم که مشخصه دوباره پروژه رو اجرا کنید و از خروجی جدید لذت ببرید.خب این آموزش اینجا به اتمام رسید اگه دوست دارید که باز ادامه بدمش همینجا تو کامنت ها بهم بگید.اگرم سرعتتون بالاست و زبان خوبی دارید میتونید مستندات رسمی وب پک رو از اینجا دنبال کنید. علی کمیجانی علی کمیجانی Thu, 08 Jul 2021 00:36:48 +0430 وب پک چیست و چرا باید از آن استفاده کنیم (قسمت دوم) https://virgool.io/justforfun/what-is-webpack-and-why-use-it-part-2-adok7c6dxpvo خب جلسه قبلی مزایای وب پک رو با همدیگه دیدیم و یه اپ ساده نوشتیم و از وب پک توش استفاده کردیم.وب پک چیست و چرا باید از آن استفاده کنیم ؟ساختن فایل تنظیمات برای وب پکگفتیم که وب پک کلی تنظیمات داره که میتونیم باهاش روی وب پک تسلط داشته باشیم و بهش بگیم دقیقا چجوری فایل ها رو برای ما باندل کنه. این جلسه قراره با همدیگه روی این تنظیمات یه نگاهی داشته باشیم.برای شروع اول فایل های جلسه قبل رو روی سیستم کلون کنیدhttps://github.com/alikomijani/webpack-demoخب برید داخل روت اصلی و یه فایل با اسم webpack.config.js ایجاد کنید. و خطوط زیر رو داخلش بنویسیدconst path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, };خط اول داره یه کتابخونه رو ایمپورت میکنه که کارش دسترسی به دایکتوری سیستم هست تو خط بعدی داریم تنظیمات وب پک رو اکسپورت میگیریم. تو خط بعد داریم میگیم ورودی وب پک از کدوم فایل هست و در خطوط بعدی هم داریم مشخصات فایل خرجی یا باندل شده رو به وب پک میدیماگه دقت کرده باشید این همون تنظیمات پیشفرض وب پک هست که در جلسه قبلی باهاش خروجی گرفتیم. با همین توظیحاتی که من دادم احتمالا الان دیگه باید بدونید چجوری اسم فولدری که خرجی ها داخلش ساخته میشه رو عوض کرد یا اینکه اسم فایل ورردی و خرجی رو چطور تعیین کرد.خب حالا در خط فرمان دستور زیر رو وارد کنید.$ npx webpack --config webpack.config.jsنکته به پارامتر آخر دقت کنید ما داریم با سوویچ config به وب پک میگیم که فایل تنظیمات تو اسمش چیه خب تو این مثال به این سوئیچ احتیاجی نداریم چون اسم پیشفرض فایل تنظیمات همین اسمی هست که الان روی فایل گذاشتیم ولی من خواستم این نکته رو آموزش بدم که اگه مثلا بخوایم چند نوع خروجی متفاوت بگیریم میتونیم چند تا فایل تنظیمات با اسم های مختلف بسازیم و براحتی به وب پک بگیم خروجی رو با کدوم تنظیمات و چطور بسازه.(قاعدتا حتی میتونید تو پوشه های مختلف خروجی بگیرید. مثلا یه نسخه مینیفای شده و یه نسخه غیره فشرده.)ایجاد دستور میان بر در نودخب وقتی پروژه بزرگ و بزرگتر میشه ما ممکنه بخوایم نسخه های مختلفی رو خرجی بگیریم ویا توسعه بدیم و یا حتی تست های مختلفی اجرا کنیم. هر کدوم از این عملیات ها مستلزم اینه شما یه سری دستور تو خط فرمان با سوئیچ های خاص خودش بزنید که خب هم زمان بره هم اگه بخواید پروژه رو به اشتراک بزاید باید این دستورات و سوئیچ ها رو با بقیه برنامه نویس ها هم به اشتراک بزارید. نود برای این مسئله یه راه حل تدارک دیده که اونم npm scripts هست. برای اینکه اولین اسکریپت خودمون رو بنویسیم برید و فایل pakage.json رو باز کنید { &quotname&quot: &quotwebpack-demo&quot, &quotversion&quot: &quot1.0.0&quot, &quotdescription&quot: &quot&quot, &quotprivate&quot: true, &quotscripts&quot: { - &quottest&quot: &quotecho \&quotError: no test specified\&quot && exit 1&quot + &quotbuild&quot: &quotwebpack&quot }, &quotkeywords&quot: [], &quotauthor&quot: &quot&quot, &quotlicense&quot: &quotISC&quot, &quotdevDependencies&quot: { &quotwebpack&quot: &quot^5.4.0&quot, &quotwebpack-cli&quot: &quot^4.2.0&quot }, &quotdependencies&quot: { &quotlodash&quot: &quot^4.17.20&quot } }خطی که اول − داره رو پاک و خطی که + داره رو اضافه کنید(از این به بعد این قراردادمون هست) حالا کافیه تو خط فرمان دستور ٰ$ npm run buildرو اجرا کنیم تا خروجی ساخته بشه.امیدوارم از این قسمت هم لذت برده باشید. تو قسمت بعدی نحوه بارگذاری استایل ها و عکس ها رو بهتون آموزش میدم. علی کمیجانی علی کمیجانی Thu, 17 Jun 2021 00:12:41 +0430 وب پک چیست و چرا باید از آن استفاده کنیم؟ (قسمت اول) https://virgool.io/justforfun/%D9%88%D8%A8-%D9%BE%DA%A9-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%B2-%D8%A2%D9%86-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-fawjsbvndkza سلام من علی کمیجانی هستم بیش از سه ساله که به صورت حرفه ای دارم کد میزنم و یک سالی هست که دارم دانش خودم رو توسط تدریس با بقیه تقسیم میکنم.خب بریم سر اصل مطلب؛ همیشه سرکلاس وقتی میخوام یه چیز جدید به بچه ها بگم سوال اولی که میپرسن اینه که این چیه و به چه درد میخوره و چرا باید ازش استفاده کنیم:) منم برای اینکه به این سوال بچه ها پاسخ بدم اول براشون یه نیاز ایجاد میکنم و بعدا توضیح میدم.یه نکته بگم اگه با نود جی اس آشنایی ندارید این مقاله بدردتون نمیخوره، اگه دوست دارین با استفاده از نود یه پروژه کوچیک با همدیگه بنویسیم همینجا تو نظرات اعلام کنید که تو مقالات بعدی بریم سراغش.خب حتما براتون پیش اومده که وقتی دارین توی فرانت کد میزنین کلی کتابخونه رو خودتون ایمپورت کرده باشین و خب بدلیل تحریم ها و یا پرفورمنس یا هرعلت دیگه ای مجبور میشین اون کتابخونه ها رو دانلود کنید و از لوکال خودتون وارد کنید. تا حالا براتون پیش اومده که یه اسکریپتی رو اضافه کنین که توش از یه کتابخونه مثل جی کوئری استفاده کردین ولی چون اسکریپتتون رو بالا از ایمپورت جی کوئری ایمپورت کرده بودید کدتون اجرا نشده و خطا گرفتین؟ یا مرورگر کد جاوا اسکریپتی که نوشتین رو کش کرده و تغییراتی که رو کدتون اعمال کردین رو لود نمیکنه؟تاحالا شده از یه قابلیت پیشرفته در جاوا اسکریپت بخواین استفاده کنید ولی نگران این باشید که آیا همه مرورگرها این قابلیت رو ساپورت میکنن یا نه؟در واقع هرچقدر پروژه بزرگتر میشه مدیریت این مسائل سختر میشه شاید برای تک تک این مسائل راه حل های خوبی وجود داشته باشه ولی چقدر خوب میشد که یه راه حل جامع وجود داشت که این مشکلات اصلا بوجود نمیامد. خب خبر خوب اینکه این راه حل وجود داره و اسمش وب پک (webpack) هست.کار و‌ب‌پک باندل کردن هست و تمامی فایل های شما از قبیل استایل‌ها ، عکس‌ها ، فونت‌ها و مهمتر از همه فایل‌های جاوااسکریپت شما رو مدیریت میکنه. یه خوبی دیگه‌ای هم که وب‌پک داره اینه که از پلاگین‌ها پشتیبانی میکنه و کارهای مثل مینیفای کردن یا تبدیل فایل‌های sass به css رو میتونه براتون به راحتی انجام بده.خب اگه از حرف زدن خسته شدین بهتر بریم سراغ کد و کمی دست به کد بشیم خب مراحل زیر رو با همدیگه انجام میدیمmkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-devخط اول یه پوشه با اسم webpack-demo میسازه اگه ویندوزی هستید نترسید چیزخاصی نیست یه راست کلیک کنید و یه پوشه (folder) با این اسم هرجایی که دوست داشتید بسازید:) تو خط دوم میریم داخل پوشه و خط فرمان از این به بعد مقصد دستوراتش این پوشه اس. خط بعدی یه پروژه نود رو استارت میکنیم -y میگه ازم سوال نکن و همه سوالات رو خودت پاسخ پیشفرض بده برای وقتی که حال ندارید خوبه:)) خط آخر هم webpack و webpack-cli رو به عنوان کتابخونه های مورد نیاز برای توسعه برای پروژه نصب میکنه. خب حالا توی پوشمون یه فایل package.json داریم و یه پوشه node_module که کتابخونه های نود توش نصب شده.خب توی همین پوشه webpack-demo یه فایل درست کنید به اسم index.html و یه پوشه جدید به اسم src و داخل این پوشه جدید یه فایل index.js بسازید ساختار پوشمون باید این شکلی شده باشه webpack-demo |-package.json |-index.html |-src |-index.jsحالا داخل فایل index.html کد های زیر رو اضافه میکنیم<!DOCTYPE html> <html> <head> <meta charset=&quotutf-8&quot /> <title>Getting Started</title> </head> <body> <div id='root'></div> <script src=&quothttps://code.jquery.com/jquery-3.6.0.min.js&quot integrity=&quotsha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot crossorigin=&quotanonymous&quot> <script src=&quot./src/index.js&quot> </body> </html>حالا داخل فایل index.js کد های زیر رو اضافه میکنیم$('#root').html('hello word')خب کل کاری که ما کردیم این بود که یه div با ایدی root ساخت و محتویاتش رو با جی کوئری تغییر دادیم تا اینجا هیچ چیز جدید وجود نداشت اما مشکل این شیوه کد زنی چیه؟داخل کد index.js ما گفته نشده که این فایل به وجود جی کوئری وابسته اس اگه فایل جی کوئری لود نشه و یا حتی ترتیبش اشتباه باشه و زیر اسکریپت ما ایمپورت بشه کد ما کار نمیکنهاگه ما کتابخونه ای رو وارد کنیم ولی به هردلیلی ازش استفاده نکنیم مرورگر متوجه نمیشه و کماکان اون رو لود میکنهخب بریم ادامه ببینیم چجوری میشه این مشکلات رو با وب پک حل کرد اول بیاید یه پوشه با نام dist توی همون پوشه webpack-demo بسازید و فایل index.html رو منتقل کنید به اونجا و داخل index.html رو اصلاح کنید:<!DOCTYPE html> <html> <head> <meta charset=&quotutf-8&quot /> <title>Getting Started</title> </head> <body> <div id='root'></div> <script src=&quotmain.js&quot> </body> </html>ما الان اسکریپت جی کوئری رو پاک کردیم و اسکریپت خودمون رو هم اسمش رو عوض کردیم ولی چرا؟ چون قرار اسکریپت جدید رو وب پک برامون بسازه یکم صبر کنید:)حالا توی همون خط فرمان قبلی بزنید npm i jquery --saveبا این کار پکیج منیجر میاد و جی کوئری رو روی سیستم نصب میکنهحالا فایل index.js رو باز کنید و کد زیر رو به اولش اضافه کنیدimport $ from 'jquery'حالا نوبت جادوگری وب پک هست توی خط فرمان بزنید npx webpackاین خط باعث میشه وب پک قایل نهایی رو بسازه حالا یه نگاه به پوشه dist بندازید. میبینید که یه فایل main.js به پروژه اضافه شده که اگه بازش کنید کل سورس جی کوئری به علاوه کد شما داخلش هست.خب این یه استارت ساده بود وب پک کلی امکانات داره و کلی تنظیمات که یاد دادن همه این ها تو یه مقاله نمیگنجه فعلا برای این مقاله در همین حد کافیه تو مقاله بعدی قول میدم کمتر حرف بزنم و بیشتر کد بزنیم.خوشحال میشم در مورد اولین نوشته من نظر بدین اگه سوالی هم داشتید همینجا ازم بپرسید.تو قسمت بعدی یاد میگریم چجوری وب پک رو کانفیگ کنیم چجوری استایل ها رو استفاده کنیم از عکس ها چجوری استفاده کنیم و فونت ها رو هم لود کنیمسعی میکنم فایلهای هر پروژه رو هم روی گیت بزارم و آدرسش رو آخر مقاله بزارم تا اگه مشکلی بود بتونید کد رو ببینید. دوستون دارم فعلا خدانگهدار.https://github.com/alikomijani/webpack-demoوب پک چیست و چرا باید از آن استفاده کنیم؟ (قسمت دوم) علی کمیجانی علی کمیجانی Tue, 15 Jun 2021 00:56:16 +0430