prepack ابزار بهینه ساز کد های جاوااسکریپت

معمولا نوشته های زیادی در مورد ابزار ها و ویژگی های جاوااسکریپت منتشر میکنیم که اگه علاقه مند بودین، میتونید به وبلاگ سایتمون سر بزنید و در موردشون بیشتر بخونید . این نوشته ها حاصل وب گردی هایی هست که انجام میدم به همین دلیل همیشه درپایان دو یا سه لینک به عنوان منبع و برای مطالعه بیشتر قرار میدم .

اما توی این نوشته قراره در مورد ابزاری به اسم prepack براتون بنویسم ، ابزاری که کد های جاوااسکریپتتون رو بهینه میکنه و کمک به اجرای سریع تر کد های جاوااسکریپت میکنه .

در ادامه در مورد روند کاری این ابزار براتون صحبت میکنم تا بیشتر باهاش آشنا بشید . prepack کارش به این صورت هست که محاسباتی رو حذف میکنه که در حین اجرا انجام نمیشن ، فقط در زمان کامپایل انجام میشن . این ابزار کد های عمومی جاوااسکریپت رو با کد های مشابهی که ساختار ساده تری داره جایگزین میکنه ، اینطوری از اکثز محاسبات و تخصیص آبجکت ها راحت میشید .

تقریبا اکثر کسایی که برنامه نویس هستند یا با برنامه نویسی آشنا هستند ، با مثال Hello World آشنا هستن یا یه حس خاصی بهش دارن !! اینجاهم برای درک بیشتر مساله ما از این مثال استفاده میکنیم .

شما به کد های زیر توجه کنید :

(function () {
  function hello() { return 'hello'; }
  function world() { return 'world'; }
  global.s = hello() + ' ' + world();
})();

(function () {

function hello() { return 'hello'; }

function world() { return 'world'; }

global.s = hello() + ' ' + world();

})();

حالا خروجی این کد ها رو با استفاده از prepack در پایین ببینید :

(function () {
  s = "hello world";
})();

(function () {

s = "hello world";

})();

یا برای مثال نگاهی به کد های فیبوناچی بندازید :

آشنایی با 10 کتابخانه جاوااسکریپت

(function () {
  function fibonacci(x) {
    return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);
  }
  global.x = fibonacci(23);
})();

(function () {

function fibonacci(x) {

return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);

}

global.x = fibonacci(23);

})();

و حالا :

(function () {
  x = 28657;
})();

(function () {

x = 28657;

})();

فکر کنم تا حدودی متوجه ماجرا و تفاونی که به وجود میاد شدید .

نحوه استفاده و نصب prepack

اول باید cli به وسیله npm نصب کنید :

npm install -g prepack

1	npm install -g prepack

البته اگه yarn رو بیشتر قبول دارید اون رو نصب کنید

npm install -g yarn

1	npm install -g yarn

حالا ابزار رو نصب کنید

yarn global add prepack

1	yarn global add prepack

برای کامپایل کردن یک فایل و به سراغ کنسول رفتن

prepack script.js

1	prepack script.js

رشته

Prepack.prepack(codeString, options) // returns { code: string, map: SourceMap }

1	Prepack.prepack(codeString, options) // returns { code: string, map: SourceMap }

غیر همزمان

Prepack.prepackFile(filename, options, callback) <span class="hljs-comment">// callback(error, { code: string, map: SourceMap })</span>

1	Prepack.prepackFile(filename, options, callback) <span class="hljs-comment">// callback(error, { code: string, map: SourceMap })</span>

همزمان

Prepack.prepackFileSync(filename, options) <span class="hljs-comment">// returns { code: string, map: SourceMap }</span>

1	Prepack.prepackFileSync(filename, options) <span class="hljs-comment">// returns { code: string, map: SourceMap }</span>

ببنید prepack هیچوقت یک محیط مروگر یا node.js رو شبیه سازی نمیکنه . وقتی که از prepack برای کدنویسی استفاده میکنید و این کد ها هم به دستورات document یا window ارجاع داده میشن ، ابزار prepack اون هارو به صورت undefined ارزیابی میکنه .

خب مثل همه نوشته های دیگه سایت چند تا لینک دیگه برای معرفی بیشتر میزارم .

لینک اول

لینک دوم

لینک سوم