آموزش npm و نصب و راه‌اندازی Webpack در ۱۰ دقیقه!

توجه: این مقاله به مرور زمان، ویرایش و یا تکمیل می‌شود!تقاضا: در صورتی که با مشکل تایپی، دستوری و یا مفهومی در این مقاله برخورد کردید، از شما دوست عزیز و گرامی، صمیمانه تقاضا می‌کنم که اینجانب را مطلع کرده، تا نسبت به تصحیح و یا تکمیل آن، در اسرع وقت، اقدام نمایم.با کمال تشکرداریوش تصدیقیکانال تلگرام: IranianExperts@شماره تلفن همراه: ۰۹۱۲۱۰۸۷۴۶۱نشانی پست الکترونیکی: DariushT@GMail.comفیلم‌های آموزشی https://www.aparat.com/DariushTآدرس سایت‌ها: https://WebsiteAnalytics.ir - http://IranianExperts.ir - http://Date2Date.irنسخه مقاله: ۱.۴ - تاریخ بروزرسانی: ۱۳۹۹/۰۲/۲۳برای این آموزش، ما نیاز به دو برنامه داریم. یکی Node.js و دیگری Visual Studio Code. این دو را می‌توانیم از نشانی‌های ذیل (با توجه به سخت‌افزار و سیستم‌عاملی که داریم) دانلود و نصب نماییم:https://nodejs.org/en/https://code.visualstudio.com/دلیل نصب و راه‌اندازی برنامه Node.js در این مقاله، صرفا استفاده از یک زیربرنامه آن، یعنی npm می‌باشد. npm، مخفف Node Package Manager بوده و از طریق آن می‌توانیم بسته‌هایی (Package) را که نیاز داریم، با دستورات ساده‌ای، از سایت ذیل دانلود و بروزرسانی نماییم:https://www.npmjs.com/توجه: در تمام دستورات ذیل، پارامترهای ورودی آن کاملا Case Sensitive بوده و باید در تایپ پارامترهای ورودی، به بزرگی و کوچکی آن‌ها توجه نماییم!برنامه Command Prompt‌ را اجرا می‌کنیم. معمولا توصیه می‌شود که این برنامه به صورت Run as administrator اجرا شود!وارد یکی از Drive های سیستم شده (در این مقاله، ما درایو D را انتخاب کرده‌ایم) و یک پوشه به نام (مثلا) LearningWebpack ایجاد کرده و وارد آن می‌شویم:?> D: D:\...> cd / D:\> md LearningWebpack D:\> cd LearningWebpack D:\LearningWebpack>برای ایجاد پروژه، از دستور ذیل استفاده می‌کنیم:D:\LearningWebpack> npm initبا اجرای دستور فوق، چندین سوال از ما پرسیده می‌شود که می‌توانیم بدون تغییر صرفا ENTER را زده تا مقادیر پیش‌فرض در نظر گرفته شوند.نکته: به جای روش فوق، می‌توانیم از دستور ذیل استفاده نماییم که در این صورت، دیگر از ما سوالی پرسیده نشده و مقادیر پیش‌فرض به طور اتوماتیک در نظر گرفته می‌شوند:D:\LearningWebpack> npm init -yبا اجرای یکی از دستورات فوق، فایلی به نام package.json ایجاد می‌شود:package.jsonبرای نصب و راه‌اندازی Webpack دستور ذیل را اجرا می‌کنیم:D:\LearningWebpack> npm install --save-dev webpack webpack-cliبه جای کلمه install می‌توانیم از حرف i، و به جای عبارت save-dev-- نیز می‌توانیم از سوئیچ D- (باید D با حروف بزرگ نوشته شود) استفاده نماییم:D:\LearningWebpack> npm i -D webpack webpack-cliنکته: زمانی که می‌خواهیم با استفاده از دستور npm i، چند Package‌ را نصب نماییم، می‌توانیم Package ها را با یک Space از هم جدا کرده و جلوی هم بنویسیم. به عنوان مثال، دستور فوق، معادل دو دستور ذیل می‌باشد:D:\LearningWebpack> npm i -D webpack D:\LearningWebpack> npm i -D webpack-cliنکته: عبارت save-dev-- و یا سوئیچ معادل آن یعنی D-، بدان معنا است که می‌خواهیم این Package ها در داخل همین پوشه، دانلود و نصب گردند (قرار گیرند). در ضمن کلمه dev نیز یعنی این Package ها ابزاری هستند که صرفا در زمان Development مورد استفاده قرار می‌گیرد و بعد از Build پروژه و برای قرارگیری پروژه در سایت استفاده و کاربردی ندارند!باید دقت داشته باشیم که نباید Package‌ هایی مانند JQuery و یا Bootstrap را به صورت dev‌ نصب نماییم! چرا که این Package ها، باید تا مرحله آپلود در سایت در کنار پروژه قرار داشته باشند! برای این‌گونه Package ها، به جای نوشتن عبارت save-dev--، صرفا از عبارت save-- استفاده می‌کنیم.نکته: صرفا Package هایی که مربوط به زمان Development می‌شوند را می‌توانیم به صورت global‌ نصب نماییم. یعنی به جای این‌که در داخل پوشه جاری نسبت به نصب آن‌ها اقدام نماییم (local)، آن‌ها را به صورت global نصب کرده تا برای هر پروژه، نیازی به نصب مجدد آن‌ها نداشته باشیم. به عنوان مثال، می‌توانستیم برای نصب Webpack به شکل فوق، از دستور ذیل استفاده نماییم:D:\LearningWebpack> npm i -g webpack webpack-cliنکته: از آن‌جایی که ممکن است بخواهیم پروژه را مجهز به git (سورس کنترل) کرده و چندین نفر را برای Develop‌ بر روی پروژه، دعوت به مشارکت نماییم، اگر Package ها را به صورت global نصب نماییم، ممکن است که برنامه‌نویس‌ها، نسخه‌های مختلفی از Package های global بر روی سیتم خود داشته باشند و این مساله در درازمدت برنامه‌نویس‌ها و یا برنامه را دچار مشکل می‌کند! به همین دلیل شاید بد نباشد که به شکل اولیه، این‌گونه Package ها را نیز به صورت local نصب نماییم!با نصب Package های webpack و webpack-cli (به صورت local)، یک پوشه به نام node_modules، در پوشه جاری، ایجاد شده و در داخل آن تعداد زیادی پوشه بوجود می‌آید!نکته: در صورتی که سورس‌کدی را از GitHub, GitLab و غیره دریافت کرده باشیم، معمولا پوشه node_modules وجود ندارد! لذا قبل از هر کاری، ابتدا دستور ذیل را اجرا می‌کنیم تا با توجه به محتوای فایل package.json، بسته‌های (Package) لازم دانلود شده و در داخل پوشه node_modules قرار گیرند:D:\LearningWebpack> npm iنکته: در صورتی که پوشه node_modules و فایل package.json وجود داشته باشد، شاید بد نباشد که هر از چند گاهی، نسبت به بروزرسانی بسته‌ها (Package) اقدام نماییم.برای این منظور، می‌توانیم برای بروزرسانی بسته‌های محلی (local)، از دستور ذیل استفاده کرده:D:\LearningWebpack> npm uو برای بسته‌های سراسری (global)، از دستور ذیل استفاده نماییم:D:\LearningWebpack> npm u -gحال با استفاده از دستور ذیل، وارد برنامه Visual Studio Code = VSCode می‌شویم:D:\LearningWebpack> code .نکته: در ادامه درس، ممکن است که بخواهیم مسیرها، پوشه‌ها و یا فایل‌هایی را به نام‌های خاصی ایجاد نماییم. دلیل این نام‌گذاری‌ها (لااقل در این مقاله) آن است که این نام‌ها، نام‌های پیش‌فرض بوده و ما می‌توانیم با کمترین تغییرات و بدون نیاز به ایجاد و یا ویرایش فایل config مربوط به webpack، و با سرعت، کارمان را پیش ببریم! ولی باید بدانیم که می‌توانیم با ایجاد و یا ویرایش فایل config‌ مربوط به webpack، مسیرها، پوشه‌ها و یا نام‌ها را به سلیقه خود، تغییر داده و بومی‌سازی نماییم.در داخل برنامه VSCode و در داخل پوشه LearningWebpack، پوشه‌ای به نام src ایجاد کرده و یک فایل به نام index.js در داخل آن ایجاد می‌کنیم.نکته: برای این‌که در این مقاله نیازی به آموزش فایل config مربوط به webpack وجود نداشته باشد، نام پوشه را دقیقا src و نام فایل (اصلی) جاوااسکریپت را دقیقا index.js نامگذاری می‌کنیم.در ادامه این مقاله می‌خواهیم یک فایل js دیگری (به عنوان مثال greeting.js) ایجاد کرده، در داخل آن یک تابع نوشته و آن را export نموده و سپس آن فایل را در فایل js‌ اصلی (index.js)، اصطلاحا import نماییم.نکته: دستورات export و import مربوط به ایجاد و استفاده از Module ها در استانداردهای ES6 (ویژگی‌های ECMAScript 2015) بوده و هر چند که بسیاری از Browser های جدید آن را Support (پشتیبانی) می‌کنند، ولی از آنجایی که ممکن است نسخه‌های قدیمی Browser ها آن را پشتیبانی نکنند، Webpack به ما کمک می‌کند و ضمن آن‌که کدهای مدرن جاوااسکریپت نسخه ES6 را تبدیل به کدهای جاوااسکریپت نسخه ES5 می‌کند، عملیات Bundle کردن را نیز انجام داده (تجمیع کردن همه فایل‌های js، به یک فایل js)، فایل تجمیع شده js را نیز Minify (کم حجم) می‌کند!در کنار فایل index.js (در داخل پوشه src)، فایل دیگری (مثلا) به نام greeting.js و با محتوای ذیل ایجاد می‌کنیم:export default function () { console.log('Hello World!'); }حال این فایل را در فایل index.js، اصطلاحا import کرده و از تابع داخل آن استفاده می‌کنیم. محتوای فایل index.js به شرح ذیل می‌باشد:import somefunction from './greeting'; somefunction();در داخل پوشه اصلی (LearningWebpack)، فایلی به نام index.html و با محتوای ذیل ایجاد می‌کنیم:<!DOCTYPE html> <html lang=&quoten&quot> <head> <title>Home</title> <meta charset=&quotUTF-8&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot> </head> <body> <h3>Learning Webpack!</h3> <script src=&quot./dist/main.js&quot> </body> </html>در داخل پوشه اصلی (LearningWebpack)، نیازی به فایل package-lock.json نداریم، و می‌توانیم آن‌را پاک کنیم:package-lock.jsonنکته: برای این‌که متوجه بشویم که فایل package-lock.json چرا در نسخه‌های جدید ایجاد می‌شود و چرا برای ما چندان کارایی نداشته و می‌توانیم آن‌را حذف نماییم، می‌توانیم به نشانی ذیل مراجعه نماییم:https://docs.npmjs.com/configuring-npm/package-lock-json.htmlفایل package.json را تغییر می‌دهیمحال وارد فایل package.json شده و تغییرات ذیل را در داخل آن اعمال می‌کنیم:عبارت private برابر مقدار true را به آن اضافه می‌کنیم.نکته: برای این‌که دلیل نوشتن عبارت private را متوجه شویم، می‌توانیم به لینک ذیل مراجعه نماییم:https://docs.npmjs.com/files/package.json#privateخطی که عبارت main برابر مقدار index در آن وجود دارد را حذف می‌کنیم.خطی که عبارت test برابر echo در آن وجود دارد را حذف می‌کنیم.در داخل ناحیه scripts، عبارت build‌ برابر مقدار webpack را به آن اضافه می‌کنیم.پس از اعمال تغییرات ذیل، محتوای فایل package.json به شکل ذیل خواهد بود:{ &quotname&quot: &quotLearningWebpack&quot, &quotversion&quot: &quot1.0.0&quot, &quotdescription&quot: &quot&quot, &quotprivate&quot: true, &quotscripts&quot: { &quotbuild&quot: &quotwebpack&quot }, &quotkeywords&quot: [], &quotauthor&quot: &quot&quot, &quotlicense&quot: &quotISC&quot, &quotdevDependencies&quot: { &quotwebpack&quot: &quot^4.43.0&quot, &quotwebpack-cli&quot: &quot^3.3.11&quot } }در محیط VSCode و با استفاده از دکمه‌های ترکیبی CTRL+` وارد محیط Terminal شده و دستور ذیل را اجرا می‌کنیم:نکته: نام (`) کلمه Backtick می‌باشد و در صفحه کلید، دکمه‌ای است که بر روی ~ قرار دارد.npm run buildدستور فوق به npm اعلام می‌کند که در داخل فایل package.json و در قسمت scripts به دنبال کلیدی به نام build برگردد و معادل (مقدار) آن‌را (در این‌جا webpack) اجرا نماید. پس در واقع دستور فوق معادل این است که ما صرفا دستور ذیل را وارد نماییم:webpackبا اجرا یکی از دستورات فوق، در صورتی که در فایل‌های js ای که ایجاد کرده‌ایم، خطایی وجود نداشته باشد، ابتدا یک پوشه به نام dist ایجاد شده و در داخل آن، فایلی به نام main.js ایجاد می‌شود. فایل main.js (به صورت پیش‌فرض)، هم یک فایل تجمیعی بوده، یعنی محتوای همه فایل‌های js که در پوشه src نوشته شده‌اند را در خود جای می‌دهد، و هم اگر آن‌را باز نماییم، کاملا Minify (کم حجم) شده است!همانطور که قبلا شاهد بودیم، در فایل index.html نیز از همین فایل main.js که در پوشه dist قرار دارد استفاده شده است.حال اگر فایل index.html را با یک Browser باز کرده و وارد قسمت console آن مرورگر شویم، با عبارت Hello, World مواجه خواهیم شد.نکته: در صورتی که از دستور npm run build استفاده نماییم، خواهیم دید، ضمن آن‌که عملیات با موفقیت انجام می‌شود، یک اخطار (Warning)(متنی به رنگ زرد) به ما نمایش داده می‌شود و از ما می‌خواهد که به صراحت mode مربوط به اجرا شدن webpack را اعلام نماییم. به طور کلی سه مقدار برای mode، وجود دارد که عبارتند از:حالت development: در این حالت تمامی اتفاقات این مقاله صورت گرفته، ولی فایل نهایی Minify نمی‌شود!حالت production: این حالتی است که نتیجه آن‌را در این مقاله آموزشی شاهد بودیم.حالت none: که در واقع این حالت حالت پیش‌فرض بوده و اگر مقدار mode به صراحت اعلام نشود، مقدار none در نظر گرفته شده و این حالت نیز، دقیقا مانند حالت development عمل می‌کند.برای این‌که در زمان اجرای دستور webpack، مقدار mode آن‌را نیز اعلام نماییم، می‌توانیم در داخل فایل package.json و در قسمت scripts، یکی از دو حالت ذیل را بازنویسی نماییم: &quotbuild&quot: &quotwebpack --mode=development&quot &quotbuild&quot: &quotwebpack --mode=production&quotدر صورتی که این تغییر را در فایل package.json، اعمال نماییم، در زمان اجرای دستور npm run build، دیگر با پیام اخطار مواجه نخواهیم شد!منابعhttps://babeljs.io/docs/en/learn/https://webpack.js.org/configuration/mode/https://webpack.js.org/guides/getting-started/پایان