نقشه های منبع برای اشکال زدایی JavaScript

مقدمه

JavaScript یک زبان برنامه نویسی اولیه ، پویا و سطح بالا است که از زمان آغاز به کار در سال 1995 دستخوش تغییرات گسترده ای شده است. با افزایش برنامه های تک صفحه ای پیچیده (SPA) ، چارچوب هایی مانند Angular ، React و Vue ، ابزارهای ترانسفر مانند بابل و سیستم های ساختاری پیچیده مانند Webpack ، نیاز به تجهیزات مؤثر است.

یکی از ابزارهای ضروری در زرادخانه مدرن JavaScript در زرادخانه نقشه منبعبشر در این مقاله یک راهنمای فنی جامع برای درک ، اجرای و استفاده از نقشه های منبع برای اشکال زدایی JavaScript ارائه شده است. ما زمینه تاریخی آنها را کشف خواهیم کرد ، عمیقاً به سناریوهای پیچیده می پردازیم و ضمن ارائه تکنیک های پیشرفته اشکال زدایی ، به مشکلات احتمالی می پردازیم.

زمینه تاریخی

JavaScript به عنوان یک زبان برنامه نویسی که برای تعامل ساده وب در نظر گرفته شده بود ، شروع فروتنانه داشت. با این حال ، با تکامل چارچوب ها و توسعه دهندگان شروع به استفاده از زبانهایی مانند TypeScript ، SCSS و حتی زبانهایی که به JavaScript (به عنوان مثال ، CoffeeScript) کامپایل می شوند ، اشکال زدایی به طور فزاینده ای دشوار شد. بدون نقشه برداری مناسب از کد تولید شده به منبع اصلی آن ، اشکال زدایی به یک کار کابوس تبدیل شد.

برای پرداختن به این موضوع ، نقشه منبع مشخصات به عنوان راهی برای نقشه برداری کد کوچک یا گردآوری شده به منبع اصلی آن متولد شد و اشکال زدایی آسان تر را تسهیل می کند. اولین مشخصات رسمی نقشه های منبع در سال 2013 به تصویب رسید و در مشخصات نقشه منبع ثبت شده است.

درک نقشه های منبع

در هسته آن ، یک نقشه منبع یک فایل JSON است که نقشه برداری بین کد تبدیل شده (به عنوان مثال ، minified یا کامپایل شده) و کد منبع اصلی را ارائه می دهد. این نقشه برداری به توسعه دهندگان این امکان را می دهد تا کد اصلی را در ابزارهای توسعه دهنده مرورگر خود مشاهده کنند ، حتی اگر کد اجرایی از بین برود.

ساختار منبع

یک فایل نقشه منبع معمولی شامل چندین ویژگی است ، به ویژه:

• نسخه: نسخه مشخصات نقشه منبع.
• پرونده: نام پرونده تولید شده.
• منابع: مجموعه ای از پرونده های منبع اصلی.
• مربوط به منابع: آرایه ای که محتوای منابع اصلی را در اختیار دارد.
• نقشه برداری: یک رشته رمزگذاری شده VLQ (مقدار متغیر طول) که نحوه نقشه برداری کد تبدیل شده را به کد منبع اصلی توصیف می کند.

در اینجا یک مثال ساده از آنچه ممکن است نقشه منبع به نظر برسد آورده شده است:

{
  "version": 3,
  "file": "out.js",
  "sources": ["foo.js", "bar.js"],
  "sourcesContent": ["console.log('Hello from foo');", "console.log('Hello from bar');"],
  "mappings": ";AAAA,SAAS,CAAC,GAAR,CAAY,aAAZ,CAAA,CAAA,CAAA"
}

نقشه های منبع چگونه کار می کنند

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

نمونه های کد و سناریوهای پیچیده

مثال استفاده ساده

بیایید یک تنظیم حداقل را با استفاده از Babel برای انتقال کد ES6 به ES5 در نظر بگیریم.

// Original ES6 Code (src/app.js)
const greet = name => console.log(`Hello, ${name}`);
greet('World');

پس از اجرای بابل با پیکربندی مناسب ، ممکن است خروجی کوچک شده زیر را دریافت کنید:

// Transformed ES5 Code (dist/app.js)
"use strict";const greet=function(name){return console.log(`Hello, ${name}`)};greet("World");

در کنار این ، بابل نقشه منبع را تعریف می کند که نقشه های اصلی را تعریف می کند. در اینجا یک تحلیل مختصر آورده شده است:

• نقشه برداری: mapping فیلد به نقشه برداری هر کاراکتر در فایل مینیسم شده به پرونده اصلی و شماره خط/ستون خود کمک می کند.

مثال پیشرفته با چندین انتقال دهنده

بیایید به یک سناریوی پیشرفته تر که در آن از ابزارهای مختلف استفاده می شود ، مانند TypeScript و Webpack شیرجه بزنیم. یک پرونده TypeScript را در نظر بگیرید:

// src/index.ts
const square = (n: number): number => n * n;
console.log(square(5));

پس از تدوین از طریق TypeScript و بسته بندی از طریق وب ، ممکن است تولید کنید:

// Dist code (app.js)
!function() {
    "use strict";
    const square = (n) => n * n;
    console.log(square(5));
}();

نقشه منبع تولید شده JavaScript کامپایل شده را به صورت دقیق به پرونده اصلی Typescript پیوند می دهد و شماره های خط و نام متغیر را برای اشکال زدایی حفظ می کند.

مورد پیچیده: کد کوچک شده و مبهم

هنگام برخورد با کد کوچک (به عنوان مثال ، با استفاده از UglifyJS) ، اشکال زدایی بدون نقشه منبع به طور قابل توجهی سخت تر می شود. این مثال را در نظر بگیرید:

// Original code
function calculateTotal(subtotal, taxRate) {
    return subtotal + subtotal * taxRate;
}

// Minified output
function a(b,c){return b+b*c}

نقشه منبع کمک می کند تا به نام و پارامترهای عملکرد اصلی برگردد و به توسعه دهندگان این امکان را می دهد تا بدون نیاز به رمزگشایی نام های کوچک رمزگذاری شده ، مسائل را مشخص کنند.

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

نقشه منبع با CSS

مرورگرها همچنین از نقشه های منبع برای CSS پشتیبانی می کنند. این بدان معناست که تمام پردازنده های CSS شما (مانند SASS یا کمتر) می توانند نقشه های منبع را برای استیضاح اشکال ایجاد کنند. هنگام استفاده از ابزارهایی مانند Webpack ، پیکربندی نقشه های منبع برای پرونده های CSS یکپارچه می شود.

// Same source map configuration in a Webpack config would support CSS
devtool: 'source-map',

منابع و چارچوب ها

ابزارهایی مانند React Devtools وت redux devtools برای نمایش سلسله مراتب مؤلفه و تغییرات حالت با استفاده از منابع اصلی مؤلفه ، از نقشه های منبع استفاده گسترده کنید ، و به طور قابل توجهی به گردش کار اشکال زدایی کمک می کند.

ملاحظات عملکرد و استراتژی های بهینه سازی

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

1. از نقشه های توسعه در مقابل تولید استفاده کنید: نقشه های منبع را فقط در طول توسعه تولید کنید devtool: 'source-map'، و از تولید آنها برای ساخت تولید خودداری کنید. شما می توانید به طور مشروط بر اساس محیط ، آنها را فعال کنید.

2. از انواع مختلف نقشه های منبع استفاده کنید: با انواع نقشه های منبع مختلف ، مانند cheap-module-source-map، که می تواند عملکرد بیشتری از source-mapبشر تجارت این است که ممکن است در شماره خط دقت از دست بدهید.

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

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

مشکلات احتمالی

نگرانی های امنیتی

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

سازگاری مرورگر

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

موارد استفاده در دنیای واقعی

1. برنامه های واکنش: برنامه های اصلی React ، مانند فیس بوک ، از نقشه های منبع برای تقویت تجارب اشکال زدایی ضمن حفظ کد بهینه شده استفاده کنید. موضوعاتی که در سیاهههای مربوطه ردیابی می شوند ، اغلب به پرونده های مؤلفه اصلی پیوند می خورند.

2. کلیدی زاویه ای: برنامه های زاویه ای از نقشه های منبع خارج از جعبه استفاده می کنند و به توسعه دهندگان این امکان را می دهند تا برنامه ها را اشکال زدایی کنند که گویی مستقیماً در TypeScript نوشته شده اند ، حتی اگر در JavaScript قرار بگیرند.

3. چارچوب های تست: آزمایش كتابخانه هایی مانند JEST یا MOCHA به نقشه های منبع متکی هستند تا موارد آزمایش ناكام را به خط خاص در کد منبع اصلی برگردانند ، و اطمینان حاصل می كنند كه اشکال زدایی ساده شده است.

پایان

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

این غواصی عمیق به نقشه های منبع نه تنها جنبه های فنی آنها را در بر می گیرد بلکه سناریوهای دنیای واقعی ، چالش ها و بهترین شیوه ها را نیز فراهم می کند ، و توسعه دهندگان ارشد را با بینش های لازم برای اشکال زدایی پیشرفته مسلح می کند.

منابع و خواندن بیشتر

با درگیر شدن با مطالب ارائه شده در این راهنما ، توسعه دهندگان می توانند تسلط لازم را برای استفاده مؤثر از نقشه های منبع بدست آورند و یک کار اشکال زدایی یکبار خسته کننده را به یک فرایند قابل کنترل و کارآمد تبدیل کنند.