JavaScript ফরম্যাটার ও মিনিফায়ার

JavaScript ফরম্যাটার কী?#

একটি JavaScript ফরম্যাটার এমন কোড নেয় যা পড়তে কঠিন — একটি বান্ডলার থেকে মিনিফাইড আউটপুট, একটি চ্যাট থেকে কপি করা সংকুচিত স্নিপেট, বা শুধু একটি ফাইল যা পাঁচজন মানুষ পাঁচটি ভিন্ন ইনডেন্টেশন অভ্যাস দিয়ে এডিট করেছে — এবং তা পুনরায় লেখে যাতে কাঠামো দৃশ্যমান হয়। ইনডেন্টেশন নেস্টিংয়ের সাথে মেলে, অপারেটরগুলো ধারাবাহিক স্পেসিং পায়, এবং স্টেটমেন্টগুলো যেখানে আপনি প্রত্যাশা করেন সেখানে শেষ হয়। একটি ভালো ফরম্যাটার উল্টোটাও করে: যখন আপনার সবচেয়ে ছোট সম্ভাব্য পেলোড প্রয়োজন তখন সব অ-প্রয়োজনীয় জিনিস ছিনিয়ে নেয়।

এই পৃষ্ঠাটি উভয় কাজ করে, এবং প্রতিটি কীভাবে কাজ করে তা নিয়ে সৎ। ফরম্যাট Babel পার্সার ব্যবহার করে Prettier-এর স্ট্যান্ডঅ্যালোন বিল্ড দ্বারা চালিত — একই ইঞ্জিন অনেক টিম তাদের এডিটরে সেভে চালায়, তাই এখানকার আউটপুট আপনার প্রোজেক্ট যা তৈরি করবে তার সাথে মেলে। মিনিফাই ইচ্ছাকৃতভাবে রক্ষণশীল: এটি মন্তব্য ছিনিয়ে নেয় এবং হোয়াইটস্পেস সংকুচিত করে যখন প্রতিটি নিউলাইন রাখে, তাই স্বয়ংক্রিয় সেমিকোলন সন্নিবেশ (ASI) কখনো ভাঙে না। এটি esbuild বা terser-এর মতো একটি টোকেন-স্তরের মিনিফায়ার নয় — এটি ভেরিয়েবলের নাম পরিবর্তন করে না, ডেড কোড বাদ দেয় না, বা প্রোপার্টির নাম বিকৃত করে না। এটি ফলাফলটিকে সরাসরি একটি JS ইঞ্জিনে ফিরিয়ে দেওয়ার জন্য নিরাপদ করে তোলে, কিন্তু এটি একটি প্রোডাকশন বান্ডল ছোট করার জন্য ভুল টুল। পার্থক্যটি জানাই এটি ভালোভাবে ব্যবহার করার সম্পূর্ণ বিন্দু।

ব্যবহারবিধি#

1. বাঁদিকের JavaScript পেইনে আপনার JavaScript পেস্ট করুন, বা একটি ছোট উদাহরণ লোড করতে নমুনা ক্লিক করুন।
2. টুলবারে একটি ইন্ডেন্ট শৈলী বেছে নিন: ২, ৪, বা ট্যাব। দুই স্পেস আধুনিক প্রোজেক্টগুলোতে প্রায়-সার্বজনীন ডিফল্ট; ট্যাব শুধুমাত্র তখনই বেছে নিন যখন আপনি ট্যাবের জন্য কনফিগার করা একটি এডিটরে পেস্ট করতে চলেছেন।
3. একটি ক্রিয়া ক্লিক করুন:
   • ফরম্যাট — কোডটিকে নির্বাচিত ইনডেন্ট সহ Prettier-এর মাধ্যমে পুনরায় প্রিন্ট করে। সেমিকোলন ডিফল্টভাবে নির্গত হয়, Prettier-এর মানক আচরণের সাথে মিলিয়ে।
   • মিনিফাই — // লাইন মন্তব্য এবং /* */ ব্লক মন্তব্য সরিয়ে দেয়, স্পেস এবং ট্যাবের রান সংকুচিত করে, এবং প্রতিটি লাইনের শেষের হোয়াইটস্পেস বাদ দেয়। নিউলাইন ইচ্ছাকৃতভাবে রাখা হয়।
4. ডানদিকের আউটপুট পেইনে ফলাফল পড়ুন। এটি নিতে আউটপুট হেডারে কপি ব্যবহার করুন। মুছুন উভয় পেইন খালি করে।

যদি ফরম্যাট আপনার ইনপুট পার্স করতে না পারে (একটি বিচ্যুত বন্ধনী, একটি অসমাপ্ত টেমপ্লেট লিটারাল), স্ট্যাটাস বার বিকৃত আউটপুট তৈরি করার বদলে Prettier-এর ত্রুটি বার্তা দেখায় — তাই আপনি একটি বিভ্রান্তিকর পুনরায় ফরম্যাট তাড়া করার বদলে প্রকৃত সমস্যাটি ঠিক করেন।

মূল বৈশিষ্ট্য#

• প্রকৃত Prettier ইঞ্জিন। ফরম্যাট Babel + estree প্লাগিন সহ স্ট্যান্ডঅ্যালোন Prettier বিল্ড চালায়, একটি হাতে তৈরি বিউটিফায়ার নয়। আপনি এখানে যা পান তা হলো যা prettier --write তৈরি করে।
• ASI-নিরাপদ মিনিফাই। মিনিফিকেশনের সময় নিউলাইন সংরক্ষণ করা হয়, তাই এমন একটি লাইন যা স্বয়ংক্রিয় সেমিকোলন সন্নিবেশের উপর নির্ভর করত তা কাজ চালিয়ে যায়। অন্ধভাবে নিউলাইন সরানোই হলো কীভাবে নিষ্ঠাহীন “মিনিফায়ার” বাগ প্রবর্তন করে।
• স্ট্রিং, regex এবং টেমপ্লেট সচেতন। মন্তব্য ছিনিয়ে নেওয়া জানে একটি স্ট্রিংয়ের ভেতরের // এবং একটি প্রকৃত লাইন মন্তব্যের মধ্যে পার্থক্য, এবং ভাগ হিসেবে / এবং একটি regex লিটারালের শুরু হিসেবে — তাই এটি কখনো আপনার কোড চিবিয়ে না।
• দুই-পেইন, কপি-প্রস্তুত। ইনপুট এবং আউটপুট পাশাপাশি বসে; আউটপুট শুধু-পঠনযোগ্য একটি এক-ক্লিক কপি সহ।
• সম্পূর্ণভাবে আপনার ব্রাউজারে চলে। কোনো ব্যাকএন্ড বা আপলোড নেই। Prettier পৃষ্ঠায় বান্ডল করা এবং চাহিদামোতাবেক লোড করা হয়, তাই স্ক্রিপ্টটি এখনও একটি কঠোর self-অনলি কন্টেন্ট সিকিউরিটি নীতি পূরণ করে।

ব্যবহারিক উদাহরণ#

একটি পুরোনো gist থেকে কপি করা একটি ফাংশন, মন্তব্য এবং অসঙ্গত ইনডেন্টেশন সহ:

ইনপুট:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

২ স্পেস সহ ফরম্যাট ক্লিক করুন:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier বাঁকা ইনডেন্ট ঠিক করে, অপারেটরগুলোকে ধারাবাহিকভাবে স্পেস করে, এবং সেমিকোলন যোগ করে — কিন্তু ব্লক মন্তব্যটিকে ঠিক যেখানে ছিল সেখানে রেখে দেয়। এখন তার বদলে মূল ইনপুটে মিনিফাই ক্লিক করুন:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

মন্তব্যটি চলে গেছে, বিচ্যুত ইনডেন্ট চলে গেছে, কিন্তু প্রতিটি স্টেটমেন্ট এখনও তার নিজস্ব লাইনে বসে আছে। খেয়াল করুন কী হয়নি: fetchUser ছোট করা হয়নি, "GET" রূপান্তরিত হয়নি, অ্যারো ফাংশন তার প্যারামিটার তালিকা ধরে রেখেছে। এটি পঠনযোগ্য সংকোচন, একটি স্ক্রিপ্ট ট্যাগে ফিরিয়ে পেস্ট করার জন্য নিরাপদ — বিল্ডের সময় একটি বান্ডলার যে আগ্রাসী বিকৃতি করবে তা নয়।

প্রশ্নোত্তর#

মিনিফাই কেন ভেরিয়েবলের নাম পরিবর্তন করে না বা আমার বান্ডল ছোট করে না?#

কারণ তা সঠিকভাবে করতে একটি সম্পূর্ণ পার্সার-এবং-কোডজেন পাস প্রয়োজন (স্কোপ বিশ্লেষণ, প্রোপার্টি ট্র্যাকিং, সাইড-ইফেক্ট সনাক্তকরণ)। এই টুলের মিনিফাই ইচ্ছাকৃতভাবে একটি স্ক্যানার: এটি দ্রুত, ডিপেন্ডেন্সি-হালকা, এবং প্রমাণযোগ্যভাবে রানটাইম আচরণ পরিবর্তন করতে পারে না। একটি প্রোডাকশন বান্ডলের জন্য, অফলাইনে একটি প্রকৃত বান্ডলার চালান; দ্রুত পরিষ্কার-আপ, একটি ডকে পেস্ট করা, বা এমন একটি স্নিপেট প্রস্তুত করার জন্য এই পৃষ্ঠাটি ব্যবহার করুন যা অন্য কেউ পড়বে।

মিনিফায়ার কি স্ট্রিংয়ের ভেতরের মন্তব্য ছিনিয়ে নেয়?#

না। স্ক্যানারটি সোর্স অক্ষরে অক্ষরে অতিক্রম করে এবং ট্র্যাক করে যে এটি বর্তমানে একটি একক-উদ্ধৃত স্ট্রিং, একটি দ্বি-উদ্ধৃত স্ট্রিং, একটি টেমপ্লেট লিটারাল, বা একটি regex লিটারালের ভেতরে আছে কি না। এগুলোর যেকোনো একটির ভেতরে উপস্থিত একটি // কে টেক্সট হিসেবে গণ্য করা হয় এবং একা রাখা হয়; শুধুমাত্র প্রকৃত মন্তব্য সরানো হয়।

এটি কি TypeScript বা JSX সামলায়?#

ফরম্যাট পাথ Babel পার্সার ব্যবহার করে, যা JSX গ্রহণ করে। TypeScript টাইপ অ্যানোটেশন এবং .ts/.tsx-নির্দিষ্ট সিনট্যাক্স এখানে চালু নয় — আপনার যদি সেগুলো প্রয়োজন হয়, এই টুলটি নীরবে ভুল আউটপুট তৈরি করার বদলে একটি পার্স ত্রুটি রিপোর্ট করবে। এই পৃষ্ঠাটি প্লেইন JavaScript-এর জন্য রাখুন।

আমার কোড কি কোথাও আপলোড হয়?#

না। সবকিছু আপনি যে ট্যাবটি দেখছেন সেখানে চলে। Prettier পৃষ্ঠার সাথে বান্ডল করা এবং চাহিদামোতাবেক ইমপোর্ট করা হয়; আপনার সোর্স টেক্সট মেমরিতে পার্স করা হয় এবং কখনো নেটওয়ার্কে পাঠানো হয় না।