خوب بریم سراغ web pack

توی گروه ها حتما اسم web pack شنیدن ولی چیه و داستانش چیه؟داستان برمیگردعه به برنامه نویسی ماژولار بحث ماژول توی es معرفی شده اما هنوز هیچ مرورگری برنامه نویسی ماژولار رو با js پشتیبانی نمیکنه. حالا تکلیف ما چیه ؟ مجبوریم از کتابخونه ها برای این کار استفاده کنیم یا دقیق تر از Module Bundler ها استفاده کنیم ، که این کار رو برای ما انجام میدن ( باندل کردن ماژول ها در واقع به عمل کنار هم گذاشتن ماژول ها تحت ترتیب درست اون ها و نهایتا بیرون دادن خروجی توی یک فایل هستش. ) خب ممکن بگید ترتیب درست یعنی چی؟ فرض کنید ماژولی داریم که وابستگی به Jquery داره ، اگر ما بخوایم ماژول ها رو کنار هم تنها توی یک فایل قرار بدیم باید مطمعن بشیم که ابتدا خود Jquery لود بشه و بعد از اون این ماژولی که ما نوشتیم و وابسته به Jquery هستش . واگر نه کد هامون کار نمیکنه. برای نوشتن برنامه های ماژولار سمت کلاینت شما در واقع سه تا انتخاب دارید CommonJS وAMD و ES6 که هر کدوم رو توضیح میدیم. دو تای اولی یعنی CommonJs و AMD معمولا با نام Scriptloader شناخته می شند. توجه کنید که اینها کتابخونه و… نیستند بلکه چیزی شبیه یک استاندارد یا یک روش هستند برای استاندارد سازی کد هایی که بقیه مینویسن. CommonJS (synchronously ) ماژول کامن جی اس قطعه کد جاوا اسکریپتی هستش که در قالب آبکجت از هر ماژول خارج میشه و میتونیم ازش استفاده کنیم . خود نود جی اس هم از کامن جی اس استفاده می کنه پس اگر با نود کار کرده باشید راحت تر می تونید Common رو یاد بگیرید نکته ی مهم راجب CommonJs اینه که ماژول ها رو بصورت همزمان (synchronously ) لود می کنه . یعنی اگر شما سه تا فایل داشته باشید به ترتیبی که نوشته شدند لود میشن (یکی پس از دیگری)برای باندل یا ترکیب یا هرچی که شما میخواین اسمشو بزارید با استفاده از CommonJs شناخته شده ترین روش Browserify هستش. AMDخب حالا اگر بخواید فایل ها رو بصورت غیر هم زمان لود کنید چی؟اونموقع انتخاب شما AMD خواهد بود. خب اما باید این رو هم بگیم که خیلی ها این روش (غیرهم زمان) رو برای برای لود کردن فایل های جاوا اسکریپت نمی پسندن ؛ و همچنین سینتکس CommonJs و es6 رو راحت تر میدونن. برای کار با AMD هم شناخته شده ترین RequireJs هست. همونطور در ابتدا اشاره کردم AMD ماژول ها رو بصورت غیر همزمان لود میکنه . یعنی چه سه تا فایل داشته باشیم چه یدونه خیلی فرقی برای ما نمیکنه چون همشون با هم شروع به دانلود شدن از سرور میشن خب توی چنین شریطی دیگه معنا نداره که فایل ها رو به اصطلاح باندل کنیم. به همین خاطر هم دیگه بیشتر به کتابخونه های AMD باندلر گفته نمیشه و با نام Module loader شناخته می شند. در واقع اینکه ما سه تا فایل داشته باشیم یا یدونه توی سرعت لود ما تاثیر داره ، برای همین هم توی RequireJS هم روش هایی برای باندل کردن ماژول ها وجود داره.برای ADM کتابخونه ی دیگه ای به اسم almond هم وجود داره که البته سبک تر هستش.UMDبرای وقتی که شما هر دو رو نیاز داشتید.ES6خب آخرین انتخاب هم es6 هست. البته درستش اینه که بگیم خوده جاوا اسکریپت . که احتمالا هم راجبش شنیدید. برای اطلاعات بیشتر راجب ماژول ها در es6 میتونید این لینک رو ببینید.نمونه ی کد سینتکس es6 :import sum from "./sum"; var values = [ 1, 2, 4, 5, 6, 7, 8, 9 ]; var answer = sum(values); document.getElementById("answer").innerHTML = answer; و اما برای روش خود جاوا اسکریپت چی داریم. یکی از مهترین باندلر ها توی این قسمت قرار میگیره یعنی rollup. که ادعا میکنه فایلی که در نهایت تحویل شما میده از لحاظ سایز کوچکتر از بقیه ی ماژول باندلر ها هست(رول آپ بر اساس یک فایل کانفیگ کار میکنه ). همیچنین قابلیتی به اسم tree-shaking که ینی (فرض کنید شما ماژولی دارید به اسم util.js که محتوای اون به این صورت هستش که شامل متدهای زیادی هست و حالا فرض کنید که میخواید جایی از برنامتون از این ماژول استفاده کنید. پس برای استفاده از اون ابتدا اون رو فرخوانی می کنید و بعد فقط می خواهید از یه تابع خاص استفاده کنید حالا ایا لازمه که کل فایل دریافت کنیم در حالی که فقط از یه بخش کوچیکش استفاده کردیم؟ ویژگی tree-shaking این قابلیت رو به ما میده که فقط کدی رو که از اون استفاده کردیم رو (بصورت اتوماتیک) اضافه میکنه در واقع نسخه ی shake شده ی کد)Webpackمی رسیم به سر سخت ترین اونها ، از وب پک می تونید برای ترکیب کردن فایل های CommonJs و AMD و Es استفاده کنید. Webpack هم مثل rollup ویژگی های خودشو داره برای مثال ویژگی خوبی مثل code-splitting رو معرفی کرده (tree-shaking باعث میشد کدهای اضافه از باندل ما حذف بشه ، در اصل webpack می فهمه فلان خط کلا تو کد ما تاثیری نداره حالا اگه بخواییم یه قسمت از برنامه رو تو یه زمان خاص بارگذاری کنیم میشه code-splitting استفاده کرد ... در اصل code-splitting بعد از tree-shaking عه چون همین طوری که رو هوا نمی تونه یه تیکه از برنامه را به باندل اضافه نکنه که) اساس کار وب پک یک فایل کانفیگ هستش که همه ی کار داخل اون انجام میشه برای نمونه یک فایل کانفیک وب پک رو می بینید:module.exports = { context: __dirname + "/src", entry: "./entry", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [{ test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } },{ test: /\.coffee$/, loader: 'coffee-loader' },{ test: /\.ts$/, loader: 'ts-loader' }] } }خلاصه مطالعات منمنبع