Forwarded from Gopher Academy
🔵 عنوان مقاله
A look into how JavaScript source maps work
🟢 خلاصه مقاله:
خلاصهای از ساختوکار source map در JavaScript: کدی که در مرورگر اجرا میشود معمولاً پس از transpile، bundle و minify با کد اصلی تفاوت دارد. source map پلی است میان این دو تا بتوانید در DevTools مثل کد اصلی breakpoint بگذارید و خطاها را بخوانید. یک source map فایل JSONی است با فیلدهایی مثل version، file، sources، names، sourcesContent و یک رشته mappings که با Base64 VLQ فشرده شده و با بخشهای دلتایی موقعیتهای کد تولیدشده را به سطر/ستونهای فایلهای اصلی (و در صورت وجود، نامها) نگاشت میکند. ابزارهایی مثل TypeScript و Babel نگاشت را هنگام تبدیل میسازند، Webpack/Rollup/esbuild آنها را ترکیب میکنند و Terser در مرحله minify این زنجیره را حفظ میکند؛ این همان chain شدن source map است. مرورگر از طریق دستور sourceMappingURL (فایل خارجی یا data URI) map را میخواند و با رعایت CORS آن را decode کرده و در DevTools نمایش و دیباگ را بر اساس کد اصلی ممکن میسازد؛ همچنین پلتفرمهایی مثل Sentry با دریافت map میتوانند stack traceهای production را de-minify کنند. در عمل، به خاطر اندازه و حریم خصوصی، بهتر است در production از الگوهایی چون hidden-source-map یا nosources-source-map، میزبانی امن، و فشردهسازی/کش استفاده کنید. محدودیتها شامل دقت ستونی ناقص در برخی تبدیلها، کدهای dynamic/eval، ناسازگاری مسیرها و سوگیریهای نگاشت است. بهترین رویهها: فعالسازی map در تمام مراحل build، اعتبارسنجی در DevTools، اطمینان از CORS مناسب برای ابزار خطا، کنترل نسخه ابزارها و آزمون remap شدن خطاها در CI.
#JavaScript #SourceMaps #WebDev #Debugging #DevTools #Bundlers #Performance
🟣لینک مقاله:
https://golangweekly.com/link/176649/web
➖➖➖➖➖➖➖➖
👑 @gopher_academy
A look into how JavaScript source maps work
🟢 خلاصه مقاله:
خلاصهای از ساختوکار source map در JavaScript: کدی که در مرورگر اجرا میشود معمولاً پس از transpile، bundle و minify با کد اصلی تفاوت دارد. source map پلی است میان این دو تا بتوانید در DevTools مثل کد اصلی breakpoint بگذارید و خطاها را بخوانید. یک source map فایل JSONی است با فیلدهایی مثل version، file، sources، names، sourcesContent و یک رشته mappings که با Base64 VLQ فشرده شده و با بخشهای دلتایی موقعیتهای کد تولیدشده را به سطر/ستونهای فایلهای اصلی (و در صورت وجود، نامها) نگاشت میکند. ابزارهایی مثل TypeScript و Babel نگاشت را هنگام تبدیل میسازند، Webpack/Rollup/esbuild آنها را ترکیب میکنند و Terser در مرحله minify این زنجیره را حفظ میکند؛ این همان chain شدن source map است. مرورگر از طریق دستور sourceMappingURL (فایل خارجی یا data URI) map را میخواند و با رعایت CORS آن را decode کرده و در DevTools نمایش و دیباگ را بر اساس کد اصلی ممکن میسازد؛ همچنین پلتفرمهایی مثل Sentry با دریافت map میتوانند stack traceهای production را de-minify کنند. در عمل، به خاطر اندازه و حریم خصوصی، بهتر است در production از الگوهایی چون hidden-source-map یا nosources-source-map، میزبانی امن، و فشردهسازی/کش استفاده کنید. محدودیتها شامل دقت ستونی ناقص در برخی تبدیلها، کدهای dynamic/eval، ناسازگاری مسیرها و سوگیریهای نگاشت است. بهترین رویهها: فعالسازی map در تمام مراحل build، اعتبارسنجی در DevTools، اطمینان از CORS مناسب برای ابزار خطا، کنترل نسخه ابزارها و آزمون remap شدن خطاها در CI.
#JavaScript #SourceMaps #WebDev #Debugging #DevTools #Bundlers #Performance
🟣لینک مقاله:
https://golangweekly.com/link/176649/web
➖➖➖➖➖➖➖➖
👑 @gopher_academy
Do more with less. | Polar Signals
The Inner Workings of JavaScript Source Maps
A deep dive into how JavaScript source maps work under the hood, with examples showing how all the pieces fit together.
Forwarded from Golden Code (علی 🇨🇴)
گاهی یک رشته داریم که عناصرش با "," یا ";" جدا شدن. با استفاده از split() و یک Regex ساده میتونیم هر دو رو همزمان جدا کنیم.
مثال:
الگوی بالا میگه هرجا ", " یا ";" دیدی جداسازی انجام بده برامون
#Javascript #جاوا_اسکریپت
#جاوااسکریپت
@GoldenCodeir 🔥
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/Shefali__J/status/1988564436559249609?t=3KBELet8DL6rU_-xqTFCDA&s=35
مثال:
let text = "apple,banana;orange,grape;melon";
let parts = text.split(/[,;]/);
console.log(parts);
// ["apple", "banana", "orange", "grape", "melon"]
الگوی بالا میگه هرجا ", " یا ";" دیدی جداسازی انجام بده برامون
#Javascript #جاوا_اسکریپت
#جاوااسکریپت
@GoldenCodeir 🔥
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/Shefali__J/status/1988564436559249609?t=3KBELet8DL6rU_-xqTFCDA&s=35
X (formerly Twitter)
Shefali (@Shefali__J) on X
JavaScript Tip💡
You can split a string at both commas and semicolons and create an array of individual elements.
You can split a string at both commas and semicolons and create an array of individual elements.