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

امروزه، کدی که شما برای نوشتن برنامه خود استفاده می کنید معمولاً همان کدی نیست که در تولید به کار گرفته شده و توسط مرورگرها تفسیر شده است. شاید شما در حال نوشتن کد منبع خود به زبانی باشید که به JavaScript کامپایل میشود مانند “CafeScript” ، “TypeScript” یا جدیدترین نسخه تأیید شده استاندارد JavaScript ، یعنی ECMAScript 2015 (ES6) “. یا حتی به احتمال زیاد ، برای کاهش اندازه فایل اسکریپت های مستقر شده خود ، کد منبع خود را کوچک می کنید. احتمالاً از ابزاری مانند UglifyJS یا کامپایلر Google Closure استفاده می کنید.
از این ابزارهای تبدیل اغلب به عنوان transpilers یاد می شود – ابزاری که کد منبع را از یک زبان به همان زبان یا یک زبان سطح بالای مشابه تبدیل می کنند. خروجی آنها یک کد تعریفی است که ، در حالی که در محیط هدف (مانند JavaScript سازگار با مرورگر) عملکردی دارد ، معمولاً شباهت کمی با کدی که از آن تولید شده وجود دارد.
این یک مشکل ایجاد می کند: هنگام اشکال زدایی کد در مرورگر یا بازرسی پشته های ایجاد شده از خطاها در برنامه ، به کد جاوا اسکریپت تبدیلی و (معمولاً) ناخوانا نگاه میکنید ، نه کد منبع اصلی که برای نوشتن برنامه خود استفاده کرده اید. این همچنین می تواند ردیابی خطای JavaScript را دشوار کند.
راه حل این مشکل یک ویژگی مرورگر به نام نقشه های منبع است.
نقشه های منبع، فایل های JSON هستند که حاوی اطلاعاتی در مورد چگونگی نقشه کشی منبع مبدل شده شما به منبع اصلی آن هستند. اگر تاکنون برنامه نویسی را با زبانی کامپایل شده مانند Objective-C انجام داده اید ، می توانید به نقشه های منبع به عنوان نسخه جاوا اسکریپت نمادهای اشکال زدایی فکر کنید.
در اینجا یک نقشه منبع مثال آمده است:
{
version : 3,
file: “app.min.js”,
sourceRoot : “”,
sources: [“foo.js”, “bar.js”],
names: [“src”, “maps”, “are”, “fun”],
mappings: “AAgBC,SAAQ,CAAEA”
}

احتمالاً هرگز مجبور نخواهید شد این فایل ها را خودتان ایجاد کنید ، اما درک محتوای داخل آن ها خالی از لطف نیست:
⦁ version: نسخه مشخصات نقشه منبع که این فایل نشان میدهد (باید “3” باشد)
⦁ file: نام فایل تولید شده که نقشه منبع به آن مرتبط است
⦁ sourceRoot: ریشه URL که از آن تمام منابع نسبی هستند (اختیاری)
⦁ sources: مجموعه ای از URL ها به فایل های منبع اصلی
⦁ Names: آرایه ای از نام های متغیر / روش موجود در کد شما
⦁ mappings: نگاشت کد منبع واقعی ، به عنوان مقادیر VLQ رمزگذاری شده با پایه 64 ، نشان داده شده است
اگر به خاطر سپردن این موارد سخت به نظر می رسد ، نگران نباشید. ما نحوه استفاده از ابزارهای تولید این فایلها را برای شما توضیح خواهیم داد.
SourceMappingURL (URL نگاشت منبع)
برای اینکه به مرورگرها بگویید که یک نقشه منبع برای یک فایل تعویضی در دسترس است ، باید دستورالعمل SourceMappingURL به انتهای آن فایل اضافه شود:
// app.min.js
$(function () {
// your application …
});
//# sourceMappingURL=/path/to/app.min.js.map

وقتی مرورگرهای مدرن دستورالعمل SourceMappingURL را می بینند ، نقشه منبع را از محل ارائه شده دانلود می کنند و از اطلاعات نقشه برداری در داخل استفاده می کنند تا کد مشتری در حال اجرا را با کد منبع اصلی تأیید کنند. وقتی از کد Sentry اصلی ES6 + JSX در Firefox با استفاده از نقشه های منبع استفاده می کنیم، به صورت زیر خواهد بود (توجه داشته باشید: مرورگرها فقط هنگام باز بودن ابزارهای برنامه نویس، نقشه های منبع را دانلود و استفاده می کنند. هیچ تأثیر عملکردی برای کاربران عادی وجود ندارد):

تهیه نقشه منبع
شما می دانید که نقشه های منبع چگونه کار می کنند و چگونه می توانید مرورگر را برای دانلود و استفاده از آنها به کار بگیرید. اما چگونه می توانید درواقع آنها را تولید کرده و آنها را از فایل های تعویض شده خود ارجاع دهید؟
هر transpiler مدرن جاوا اسکریپت دارای گزینه خط فرمان برای تولید نقشه منبع مرتبط است. بیایید نگاهی به چند گزینه رایج بیندازیم.
UglifyJS
UglifyJS ابزاری محبوب برای کوچک کردن کد منبع شما برای تولید است. می تواند با از بین بردن فضای سفید ، بازنویسی نام متغیرها ، حذف شاخه های کد مرده و موارد دیگر ، اندازه فایل های شما را بطور چشمگیری کاهش دهد.
اگر از UglifyJS برای به حداقل رساندن سایز کد منبع خود استفاده می کنید ، دستور زیر از UglifyJS 3.3.x علاوه بر این ، نقشه منبع را تهیه می کند که کدهای کوچک شده را به منبع اصلی برگرداند:
⦁ $ uglifyjs app.js -o app.min.js –source-map
⦁
اگر به فایل خروجی تولید شده ، app.min.js نگاهی بیندازید ، متوجه خواهید شد که خط نهایی شامل دستورالعمل SourceMappingURL است که به نقشه منبع جدید ما اشاره دارد.
//# sourceMappingURL=app.min.js.map

توجه داشته باشید که این یک URL نسبی است. برای اینکه مرورگر بتواند نقشه منبع مرتبط را دانلود کند ، باید از همان دیرکتوری مقصد به عنوان فایل Uglified ، app.min.js. ، آپلود و سرویس دهی شود. این بدان معناست که اگر app.min.js از http://example.org/static/app.min.js سرویس دهی می شود ، بنابراین باید نقشه منبع شما از http://example.org/static/app.min.js.map نیز ارائه شود.
URL های نسبی تنها راه مشخص کردن SourceMappingURL نیستند. می توانید از طریق گزینه –source-map-url <url> به Uglify ، یک URL مطلق بدهید. یا حتی می توانید کل نقشه منبع را بصورت درون خطی وارد کنید ، اگرچه توصیه نمی شود. برای اطلاعات بیشتر به گزینه های خط فرمان Uglify نگاهی بیندازید.
Webpack
Webpack ابزاری برای ساخت قدرتمند است که ماژول های JavaScript را در فایل های مناسب برای اجرا در مرورگر ، مقرر و تنظیم می کند. پروژه Sentry خود از Webpack (همراه بابل) برای مونتاژ و تبادل پایه كدهای ES6 + JSX در JavaScript سازگار با مرورگر استفاده می كند.
تهیه نقشه های منبع با Webpack بسیار ساده است. در Webpack 4 خاصیت devtool را در پیکربندی خود مشخص کنید:
webpack.config.js
module.exports = {
// …
entry: {
“app”: “src/app.js”
},
output: {
path: path.join(__dirname, ‘dist’),
filename: “[name].js”,
sourceMapFilename: “[name].js.map”
},
devtool: “source-map”
// …
};
حالا وقتی برنامه خط فرمان webpack را اجرا می کنید ، Webpack فایل های خود را جمع آوری میکند ، یک نقشه منبع تهیه میکند و آن نقشه منبع را در فایل جاوا اسکریپت ساخته شده از طریق بخشنامه SourceMappingUrl ارجاع میدهد.
نقشه منبع های خصوصی
تا این مرحله ، تمام مثالهای ما بر این فرض بوده اند که نقشه های منبع شما به طور عمومی در دسترس هستند و از همان سرور مجازی همانند اجرای کد JavaScript در خدمت شما هستند. در این حالت ، هر توسعه دهنده می تواند از نقشه های منبع شما برای به دست آوردن کد منبع اصلی شما استفاده کند.
برای جلوگیری از این امر ، شما می توانید به جای تهیه یک sourceMappingURL در دسترس عموم، نقشه های منبع خود را از سرور مجازی هایی تهیه کنید که فقط برای تیم توسعه شما قابل دسترسی باشد. به عنوان مثال سرور مجازی ی خواهد بود که فقط از VPN شرکت شما قابل دسترسی است.
//# sourceMappingURL: http://company.intranet/app/static/app.min.js.map

هنگامی که یک عضو غیر تیمی با استفاده از ابزارهای توسعه دهنده از برنامه شما بازدید می کند ، سعی خواهد کرد این نقشه منبع را دانلود کند اما خطای 404 (یا 403) HTTP را دریافت می کند و نقشه منبع به کار گرفته نمی شود.
نقشه های منبع و Sentry
اگر از Sentry برای ردیابی استثنائات در برنامه های JavaScript در سمت کلاینت خود استفاده می کنید ، Sentry بطور خودکار نقشه های منبع را برای پشته ایجاد شده توسط خطاها واکشی میکند و به کار میگیرد. این بدان معناست که شما کد منبع اصلی خود را مشاهده می کنید و کد کوچک شده و یا کد تعویضی را از بین نمی برید. در اینجا ظاهر رد پشته کد unified شما در Sentry آمده است:

اگر مراحل این راهنمای مختصر را دنبال کرده اید و استقرار شما اکنون ایجاد شده است، نقشه های منبع آپلود شده و فایل های انتقالی با دستورالعمل SourceMappingURL که به آن نقشه های منبع اشاره دارند ، بارگذاری کرده اید ، کار دیگری وجود ندارد. Sentry بقیه را انجام می دهد.
روش دیگر ، به جای میزبانی نقشه های منبع ، می توانید آنها را مستقیماً در Sentry آپلود کنید.
چرا می توانید این کار را انجام دهید؟ به چند دلیل:
⦁ در مواردی که Sentry در دستیابی به سرور مجازی های شما مشکل داشته باشد (به عنوان مثال ، نقشه های منبع در VPN میزبانی شوند).
⦁ غلبه بر تأخیر – نقشه های منبع قبل از بروز استثناء در داخل Sentry قرار می گیرند.
⦁ شما برنامه ای را ایجاد می کنید که بصورت بومی روی یک دستگاه اجرا شود (به عنوان مثال ، با استفاده از React Native یا PhoneGap ، که کد / نقشه های منبع آن از طریق اینترنت قابل دسترسی نیستند)
⦁ از عدم همخوانی نسخه در جایی که نقشه منبع گرفته شده با کدی که خطا در آن قرار گرفته مطابقت ندارد ، خودداری کنید.
نتیجه
در این مقاله ، آموختید که چگونه نقشه های منبع می توانند کد منتقل شده شما را برای اولین بار در تولید راحت تر اشکال زدایی کنند. از آنجا که ابزارهای ساخت شما احتمالاً از تولید نقشه منبع پشتیبانی می کنند ، پیکربندی آن خیلی طولانی نخواهد بود و نتایج حاصل بسیار ارزش این کار را دارد.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade