سیستمهای مدیریت ماژول یا باندل کنندههای جاوااسکریپتی، چندی است که دچار تنوع زیادی شدهاند و هر از گاهی، چهرههای جدیدی خود نمایی میکنند. اگر با انگولار 2 آشنا باشید قطعا با SystemJs که یکی دیگر از این گونه باندل کننده هاست آشنایید. در این سری قصد داریم که با یک باندل کنندهی تقریبا همه کاره با نام webpack آشنا شویم.
قدم دوم نصب webpack میباشد. برای نصب وب پک دو راه وجود دارد:
اگر دقت کنید اسکریپتی با نام bundle.js در فایل html رجوع داده شده است که در پروژه وجود خارجی ندارد و قصد این است که این فایل را با استفاده از وب پک تولید کنیم.
حال با استفاده از دستور npm run webpack ./main.js bundle.js ، وب پک فراخوانی شده و تک فایل main.js را باندل میکند.
مقدمه و توضیحی بر اینکه چه لزومی بر باندل کنندههای جاوااسکریپتی هست؟
زمانیکه جاوا اسکریپت پا به عرصهی وجود گذاشت، در توسعهی برنامههای کلاینت، از سیستمهای بیلد استفادهای نمیشد و شاید بتوان سادهترین دلیل آن را عدم احتیاج جاوااسکریپت به کامپایل دانست. ولی با گذشت زمان و عوض شدن چهرهی برنامههای سمت کلاینت و بزرگتر شدن آنها، برنامه نویسان با مشکلاتی از قبیل نگه داری و امنیت، در برنامههای بزرگ رو به رو بودند.
در پاسخ به بزرگ شدن پروژهها قطعا شما این پیشنهاد را خواهید داد که بایستی برنامه را به قسمتها و یا ماژولهای کوچکتری بشکنیم، تا هم نگه داری از آن سادهتر شود و هم احتمال بروز خطا در حین انجام پروژه کاهش یابد. اما باید به یاد داشت که این قسمتهای کوچک شده به معنای یک تگ اسکریپت جدا در صفحات وب برنامه میباشند و این مساله به این معنا خواهد بود که برای هر یک از آنها، مرورگر بایستی به میزبان، درخواستی را ارسال کرده و فایلها را جداگانه دریافت کند. قطعا پاسخ به این مشکل دوباره چسباندن این ماژولها به یکدیگر است تا مرورگر فقط یک درخواست را برای این فایلها ارسال کند. این مسئله همچنین برای فایلهای css و تصاویر نیز صادق میباشد.
دومین مشکلی که با ماژول سازی برنامه با آن روبه رو میشویم، بالا رفتن حجم کد و درنتیجه بالا رفتن ترافیک مصرفی خواهد بود که این مسئله نیز بایستی توسط یک Minifier حل شود. مشکل بعدی، وابستگی ماژولها به یکدیگر است .در صورتی که در اضافه کردن یک ماژول به وابستگیهای آن دقت نداشته باشیم، باعث بروز خطا در برنامه میشویم. با استفاده از یک باندلر میتوانیم وابستگیهای هر ماژول را تعریف کنیم تا این مسئله نیز حل شود.
آخرین مسالهای که به ذهن میآید نیز میتوان قابلیتهای جدید ES6 را نام برد که به صورت سراسری در تمامی مرورگرها ممکن است هنوز قابل استفاده نباشند و شما به عنوان برنامه نویس قصد بهره بردن از آنها را داشته باشید. درنتیجه راهکار، استفاده از یک ترانسپایلر است که میتوان از معروفترین آنها تایپ اسکریپت و babel را نام برد .
راهکارهای مختلف برای حل مشکلات ذکر شده
در صورتی که با فریمورکهای سمت سرور آشنایی داشته باشید، حتما با سیستمهای باندل کننده و Minify کنندهی آنها برخورد داشته اید. به طور مثال فریمورک Asp.Net Mvc دارای یک باندل کنندهی توکار است که مشکل بسته بندی کردن کل ماژولها و همچنین Minify کردن آنها را حل میکند. ولی تا آخرین اطلاعی که دارم، مشکل وابستگی ماژولها به جز اینکه برنامه نویس به صورت دستی ترتیب اضافه شدن را رعایت نماید، قابل حل نیست. همچنین در اینجا استفاده از یک ترانسپایلر نیز مقدور نمیباشد.
راه حل دیگر استفاده از Task Runnerهای جاوا اسکریپتی مانند گرانت و گالپ میباشد که تمامی مسائلی که پیشتر ذکر شد، به وسیلهی آنها قابل حل است؛ به جز مسئلهی وابستگی ماژولها به یکدیگر که بایستی به صورت دستی توسط برنامه نویس ترتیب آنها رعایت شود یا از فریمورک هایی مانند browserify و ... استفاده شود.
راه حل webpack
تفاوت وب پک با TaskRunnerهای جاوا اسکریپتی را میتوان در اینجا بیان کرد که وب پک در انجام یک وظیفه تخصص وافری دارد و آن وظیفه نیز پردازش فایلهای ورودی و خروجی داده شده به آن است که با استفاده از کامپوننتهایی که با نام loader از آن نام میبرد، این وظیفه را انجام میدهد. با استفاده از این لودرها شما نتیجهای را که از یک TaskRunner انتظار دارید، خواهید گرفت؛ مانند ترنسپایل کردن ماژولها، بسته بندی ماژولها، Minify کردن آنها و در نهایت قابلیتی که معمولا در Task Runnerها موجود نیست و وب پک امکان انجام آن را دارد، ترکیب فایلهای Css با فایلهای جاوا اسکریپت برنامه است. این کار برای تصاویر و فونتهای برنامه نیز قابل انجام است.
پیش فرضهای کار با webpack
دو پیش فرض مهم در شروع به کار با وب پک از این قرارند:
1. وب پک برای نصب Assetهای سمت کلاینت شما از NPM استفاده میکند و انتظار دارد که شما نیز این پکیج منیجر بهره ببرید و به طور مثال از bower استفاده نکنید.
2.استفاده از یک سیستم ماژولار ( اینکه از کدام یک استفاده میکنید مهم نیست Commonjs ، amd ، es6 و...)
نصب webpack و شروع کار
webpack یکی از صدها ماژولهای نوشته شدهی با استفاده از پلتفرم nodejs میباشد. پس اول از همه چیز در صورتیکه nodejs بر روی سیستم شما نصب نیست، آن را دریافت و نصب کنید.
قبل از شروع به کار بهتر است که یک محیط کار تمیز ( یک فولدر خالی) را آماده کنید و سپس با اجرای دستور npm init، یک بستر برای کار با npm را داشته باشیم. میتوانید به صورت دستی نیز یک فایل package.json را اضافه کنید و گزینههای مدنظرتان را به آن اضافه کنید.
من با اجرای این دستور و جواب دادن به سوالاتش یک خروجی فایل package.json با این محتوا را ایجاد کردم :
{ "name": "dntwebpack", "version": "1.0.0", "description": "a webpack tutorial", "main": "main.js", "scripts": { }, "author": "mehdi", "license": "MIT" }
1. نصب وب پک به صورت گلوبال ( سراسری ) با استفاده از دستور :npm install -g webpack ، با اجرای این دستور قابلیت استفاده از وب پک را در همه جا با استفاده از خط فرمان، خواهید داشت.
2. ایراد روش اول این است که ممکن است در آینده بخواهید در پروژههای گوناگون از دو نسخهی متفاوت وب پک استفاده کنید و به خاطر نسخهای که به طور سراسری نصب شده است به مشکل بر بخورید. پس با استفاده از دستور npm install -D webpack یا npm install --save-dev webpack وب پک را به صورت محلی برای پروژه نصب میکنیم ( کاربرد پرچم D- یا --save-dev این است که وب پک در قسمت وابستگیهایی که فقط جهت توسعهی پروژه هستند، در فایل package.json اضافه میشود).
در ادامه در محیط کاری که ایجاد کردیم، دو فایل دیگر را ایجاد میکنیم. اولی یک فایل سادهی html جهت اینکه اسکریپتهای پروژه را به آن اضافه کنیم و دیگری یک فایل اسکریپت جهت اینکه آن را به وب پک بدهیم.
فایل html را index.html نام گذاری کردم و اسکریپت سمپل را نیز main.js. محتوای هر دوفایل به این صورت میباشد:
<html> <!-- index.html --> <head> first part of webpack tut! </head> <body> <h1>webpack is awesome !</h1> <script src="bundle.js"></script> </body> </html>
//main.js //start of the journey with webpack console.log(`i'm bundled by webpack`);
حالا نوبت به این میرسد که تک فایل main.js را به وب پک بدهیم.
در صورتی که وب پک را به صورت سراسری نصب کرده باشید، این کار ساده است. در خط فرمان با فراخوانی وب پک با دستور webpack ./main.js bundle.js
فایل bundle.js را تولید میکنیم.
فایل bundle.js را تولید میکنیم.
در صورتی که وب پک به صورت محلی در پروژه نصب شده باشد، فایل package.json را باز کرده و در قسمت scripts، یک ورودی جدید را به اسم webpack به همراه فرمان مورد نظر، به آن میدهیم. محتوای فایل package.json پس از این کار به صورت زیر خواهد بود:
{ "name": "dntwebpack", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" ,"webpack":"webpack" }, "author": "mehdi", "license": "ISC", "devDependencies": { "webpack": "^1.13.1" } }
در صورتی که اجرای دستور بالا موفقیت آمیز باشد، پاسخی مشابه به زیر را باید دریافت کنید:
در قسمت بعدی با تنظیمات پیشرفتهتر و loaderهای وب پک آشنا میشویم .
فایلهای پروژه dntwebpack.zip (جهت اجرای آنی احتیاج به نصب وبپک را دارید که این کار با استفاده از دستور npm install در فولدر پروژه قابل انجام است).
استفاده از IIS در VS.NET و پروژههای ASP.NET داستان خودش را دارد. در نگارشهای 2002 و 2003 آن، تنها وب سرور قابل استفاده جهت کار با VS.NET همان IIS اصلی بود. مهمترین مشکل این روش، نیاز به داشتن دسترسی مدیریتی بر روی سیستم بود (که در بعضی از شرکتها، این مورد برای عموم کاربران ممنوع است) به همراه نصب جداگانه و تنظیمات مخصوص IIS ، صرفا جهت آزمایش یک برنامهی ساده؛ همچنین با توجه به اینکه IIS جزو کامپوننتها ویندوز بوده و هر نگارشی، IIS خاص خودش را دار است، این مورد هم مشکلات ویژهای را به همراه دارد (برای مثال IIS5 ویندوز XP را با IIS7 ویندوز سرور 2008 در نظر بگیرید؛ یکی برای توسعه یکی جهت محیط کاری). این روش در VS.Net 2005 کنار گذاشته شد و از وب سرور توکاری به نام Cassini یا ASP.NET Development Server استفاده گردید. به این صورت دیگر نیازی به نصب مجزای IIS کامل جهت آزمایش برنامههای ASP.NET نبود و همچنین نیاز به داشتن دسترسی مدیریتی الزامی نیز منتفی گردید. این روش هنوز هم تا نگارش 2010 ویژوال استودیو مرسوم است؛ اما ... اما کسانی که با Cassini کار کرده باشند میدانند که یک سری از رفتارهای آن با IIS واقعی تطابق ندارد و اگر برنامهی ASP.NET شما با Cassini خوب نمایش داده میشود الزامی ندارد که با IIS واقعی هم به همان نحو رفتار کند، برای نمونه رفتار مسیریابی آدرسهای نسبی در IIS واقعی و Cassini یکی نیست. علاوه بر آن IIS های 7 و 7.5 هم امکانات و ویژگیهای خاص خود را دارند که Cassini آنها را پوشش نمیدهد؛ به علاوه این دو فقط در ویندوزهای جدید مانند ویندوز سرور 2008 یا ویندوز 7 قابل دسترسی هستند. به همین جهت اخیرا یک نسخهی سبک و express از IIS 7.5 به صورت جداگانه برای برنامه نویسها فقط جهت آزمودن برنامههای خود تهیه شده است و البته هدفگیری اصلی آن پروژهی WebMatrix است؛ به همراه ویژگیهای جدید IIS7 مانند امکان آزمودن تنظیمات ویژه IIS7 در وب کانفیگ برنامه، پشتیبانی کامل از SSL ، Url Rewrite و سایر ماژولهای IIS7، عدم نیاز به دسترسی مدیریتی برای اجرای آن، امکان اجرای آن بر روی پورتهای مختلف بدون تداخل با وب سرور(های) موجود بر روی سیستم و همچنین برخلاف IIS7 اصلی، بر روی ویندوز XP نیز قابل اجرا است. حجم نگارش IIS Express 7.5 تنها 3.9 مگابایت است:
سرویس پک یک ویژوال استودیوی 2010 (که در زمان نگارش این مطلب نسخهی بتای آن ارائه شده)، یک گزینهی جدید را به منوی کلیک راست بر روی نام پروژه در VS.NET به نام Use IIS Express ، اضافه کرده است تا به سادگی بتوان از این امکان جدید استفاده کرد (یا به عبارتی با IIS Express یکپارچه است و نیاز به تنظیم خاصی ندارد).
در سایر حالات (و نسخههایی که این یکپارچگی وجود ندارد و نخواهد داشت) به صورت زیر میتوان عمل کرد:
روش اول:
دستور زیر را در خط فرمان وارد نمائید:
"C:\Program Files\IIS Express\iisexpress.exe" /path:D:\Prog\1389\MySite\ /port:4326 /clr:v4.0
روش دوم (که در حقیقت همان روش اول با ارائهی پشت صحنهی موقت آن است):
الف) ابتدا به مسیر My Documents\IISExpress\config مراجعه کرده و فایل applicationhost.config را باز کنید. سپس گره مربوط به site را یافته (حدود سطر 153) و گزینهی serverAutoStart را حذف کنید:
<site name="WebSite1" id="1">
<application path="/">
<virtualDirectory path="/" physicalPath="%IIS_SITES_HOME%\WebSite1" />
</application>
<bindings>
<binding protocol="http" bindingInformation=":8080:localhost" />
</bindings>
</site>
<site name="WebSite2" id="2">
<application path="/" applicationPool="Clr4IntegratedAppPool">
<virtualDirectory path="/" physicalPath="D:\Prog\1389\MyTestSite\" />
</application>
<bindings>
<binding protocol="http" bindingInformation=":1389:localhost" />
</bindings>
</site>
Name در اینجا نامی دلخواه است که وارد خواهید نمود.
Id شماره سایتی است که ثبت خواهد شد.
applicationPool در اینجا بسیار مهم است. اگر سایت شما مبتنی بر دات نت 4 است، Clr4IntegratedAppPool را وارد نمائید و اگر غیر از این است، Clr2IntegratedAppPool باید تنظیم شود.
physicalPath همان مسیر پروژه شما است.
در قسمت bindingInformation هم میتوان شماره پورت مورد نظر را وارد کرد.
اکنون فایل applicationhost.config را ذخیره کرده و ببندید.
سپس دستور زیر را در خط فرمان ویندوز وارد نمائید:
"C:\Program Files\IIS Express\iisexpress.exe" /site:WebSite2
تنظیمات دیباگر VS.NET :
تا اینجا تنها موفق شدهایم که این وب سرور آزمایشی را راه اندازی کنیم. اما نکتهی مهم امکان دیباگ کردن برنامه توسط آنرا از دست دادهایم. برای این منظور در VS.NET به خواص پروژه، برگهی Web آن مراجعه کنید. در قسمت Servers گزینهی use custom web server را انتخاب کرده و آدرسی را که در یکی از دو روش فوق ساختهاید وارد نمایید. برای مثال http://localhost:4326/
همچنین باید دقت داشت که در همین قسمت هیچکدام از debuggers ذیل گزینهی use custom web server نباید تیک خورده باشند (چون VS.NET دقیقا نمیداند که باید به کدام پروسه در ویندوز attach شود).
اکنون برنامه را در حالت دیباگ در VS.NET آغاز کنید (بدیهی است فرض بر این است که iisexpress.exe با تنظیمات ذکر شده باید در حال اجرا باشد).
و ... حداقل مزیت آن بسیار سریعتر بودن این روش نسبت به Cassini یا ASP.NET Development Server است.
تا اینجا فقط VS.NET به صورت خودکار مرورگر را باز کرده و سایت نمایش داده میشود؛ اما اگر در قسمتی از کدهای خود breakpoint قرار دهیم کار نمیکند. برای این منظور باید در حین اجرای برنامه، از منوی debug ، گزینهی attach to process را انتخاب کرده و به iisexpress متصل شوید.
مطالب
لینکهای هفته سوم دی
وبلاگها ، سایتها و مقالات ایرانی (داخل و خارج از ایران)
ASP. Net
- ویدیویی دربارهی ASP.Net 4 (بهبودهای حاصل شده در web forms از جهت کار با اسکریپتها خصوصا با تاکید بر jQuery و همچنین ذکر اینکه با آمدن ASP.Net MVC ، وب فرمها کهنه نشده و همچنان توسعه و بهبود داده خواهند شد)، یا مقالهای در این مورد
طراحی و توسعه وب
PHP
اسکیوال سرور
سی شارپ
عمومی دات نت
مسایل اجتماعی و انسانی برنامه نویسی
متفرقه
نظرات مطالب
SQL Server 2005 SP3
سلام، اگه که سرویس پک های قبلی رو نصب نکرده باشیم هم میتونیم سرویس پک 3 رو نصب کنیم یا نه؟
وبلاگها و سایتهای ایرانی
- میز کاری مجازی در ویندوز ویستا (البته روی XP هم کار کرد)
ASP. Net
طراحی وب
به روز رسانیها
ابزارها
سیشارپ
عمومی دات نت
دلفی
ویندوز
متفرقه
- کدام سایتها مطالب شما را کپی کردهاند؟! (البته شبیه به این کار را با Google alerts هم میشود انجام داد. فقط کافی است آدرس سایت خودتان را در گوگل alert اضافه کنید. هر جایی لینکی به شما داده شود یا امثال آن، یک ایمیل آنی یا روزانه بسته به تنظیمات برای شما ارسال خواهد کرد.)
یکی از مشکلاتی که استفاده از VB.NET به همراه دارد عدم ارائه VB Runtime assembly در سکوهای کاری مختلف است؛ برای مثال جهت Windows Phone 7 و XNA. به همین جهت استفاده از این زبان و امکانات آن در سکوهای کاری یاد شده با مشکل روبرو بوده و سرویس پک یک VS 2010 با ارائه حالت ویژهای از کامپایل، امکان قرار دادن اسمبلی یاد شده در فایل اجرایی نهایی را میسر کرده است. برای این منظور تنها کافی است سطر ذیل به فایل vbproj اضافه گردد:
<VBRuntime>Embed</VBRuntime>
/vbruntime*
ماخذ: (+)
مطالب
خواندنیهای 22 مرداد
اس کیوال سرور
الگوهای طراحی برنامه نویسی شیءگرا
امنیت
توسعه وب
دات نت فریم ورک
متفرقه
محیطهای مجتمع توسعه
ویندوز
وبلاگها ، سایتها و مقالات ایرانی (داخل و خارج از ایران)
- مروری بر Delphi 2009 و مهاجرت به آن
- تصحیح خودکار کلمات فارسی در برنامه اپنآفیس
- دانلود عکس از سایت
- ۱۰ قانون برای نوشتن در وب
- استفاده از SQL Server در PHP
- بلوهاست و ایران
- سورس و گزارش پروژه فارسی نت منتشر شد
- درون یک ISP چه می گذرد؟
- تابعهای جادویی PHP 5
- راهنمای کوچک همکاری در پروژههای بازمتن
- nsis قدرتمندتر از آنچه یک نصب کننده نرم افزار نیاز دارد!
- چند اشتباه رایج در طراحی وب
امنیت
Visual Studio
ASP. Net
طراحی و توسعه وب
PHP
اسکیوال سرور
سی شارپ
VB
CPP
عمومی دات نت
مسایل اجتماعی و انسانی برنامه نویسی
- چه برنامهنویسهایی را استخدام نکنید؟
- چرا خانمها کمتر در پروژههای سورس باز ظاهر میشوند؟!
- IE6 را نمیخواهیم!
متفرقه
همانطور که مطلع هستید سرویس پک سه SQL Server چند روزی است که منتشر شده. این به روز رسانی بر روی یک سرور بدون مشکل نصب شد؛ در سرور دیگر به علت داشتن یک سری برنامه امنیتی مزاحم (که مثلا دسترسی به رجیستری را مونیتور و سد میکنند) با شکست مواجه و در آخر پیغام Fail نمایش داده شد. مجددا آنرا اجرا کردم، سریع تمام مراحل را تمام کرد باز هم Fail را نمایش داد.
خوب؛ گفتم احتمالا مشکلی نیست. سعی کردم به سرور وصل شوم ... پیغام «این سرور دسترسی از راه دور را نمیپذیرد» و از این حرفهای متداول ظاهر شد. به لاگ موجود در Event log ویندوز که مراجعه کردم پیغام خطای زیر نمایان بود:
Script level upgrade for database 'master' failed because upgrade step 'sqlagent100_msdb_upgrade.sql' encountered error 5597, state 1, severity 16. This is a serious error condition which might interfere with regular operation and the database will be taken offline. If the error happened during upgrade of the 'master' database, it will prevent the entire SQL Server instance from starting. Examine the previous errorlog entries for errors, take the appropriate corrective actions and re-start the database so that the script upgrade steps run to completion.
اوه! اوه! اوه! در این لحظهی عرفانی، دیتابیس master نابود شده! نمیشود وصل شد. سروری که داشت تا مدتی قبل بدون هیچ مشکلی کار میکرد، الان دیگر حتی نمیشود به آن وصل شد. به کنسول سرویسهای ویندوز مراجعه کردم (services.msc)، سعی کردم سرویس اس کیوال را که از کار افتاده دستی اجرا کنم، پیغام زیر مجددا در event log ظاهر شد:
FILESTREAM feature could not be initialized. The Windows Administrator must enable FILESTREAM on the instance using Configuration Manager before enabling through sp_configure.
قابلیت FILESTREAM را نمیتواند آغاز کند. پس از مدتی جستجو مشخص شد که این مورد را میشود در رجیستری ویندوز غیرفعال کرد؛ به صورت زیر:
1) Open up Registry Editor
2) Go To HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Microsoft SQL Server\MSSQL10.MSSQLServer\MSSQLSERVER\FileStream
3) Edit the value "EnableLevel" and set it to 0
4) Restart SQL Server.
2) Go To HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Microsoft SQL Server\MSSQL10.MSSQLServer\MSSQLSERVER\FileStream
3) Edit the value "EnableLevel" and set it to 0
4) Restart SQL Server.
پس از انجام اینکار، سرویس اس کیوال استارت شد (از طریق کنسول سرویسهای ویندوز). در ادامه، امکان اتصال به آن نبود (حتی با اکانت sa):
Login failed for user 'sa'. Reason: Server is in script upgrade mode. Only administrator can connect at this time. (Microsoft SQL Server, Error: 18401)
باز هم پس از مدتی جستجو معلوم گردید که «کمی باید صبر کرد». آن پیغام اول کار مبتنی بر تخریب دیتابیس master هم بیمورد است. پس از fail شدن نصب سرویس پک، هنوز برنامه نصاب آن در پشت صحنه مشغول به کار است. این مورد به وضوح در task manager ویندوز مشخص است. سرور به مدت 15 دقیقه به حال خود رها شد. پس از آن بدون مشکل اتصال برقرار گردید و همه چیز مجددا شروع به کار کرد.
بنابراین اگر در حین نصب سرویس پک SQL Server مشکلی پیش آمد، نگران نباشید. باید به نصاب آن زمان داد (برنامه mscorsw.exe در پشت صحنه مشغول به کار است). برنامه نصاب آن هم هیچ نوع خطای مفهومی را گزارش نمیدهد. تمام مراحل، بجای نمایش در برنامه تمام صفحه نصاب آن، در event log ویندوز ثبت میشود. این برنامه تمام صفحه فقط کارش نمایش یک progress bar است!
اگر ... هیچکدام از این موارد جواب نداد، امکان بازسازی دیتابیس master نیز وجود دارد: [^ , ^]
ولی دست نگه دارید و سریع اقدام نکنید. ابتدا به task manager مراجعه کنید. آیا برنامه mscorsw.exe در حال اجرا است؟ اگر بله، یعنی هنوز کار نصب تمام نشده. حداقل یک ربع باید صبر کنید.