Source Maps

Jab hum JavaScript frameworks use karte hain, toh ek common problem hoti hai code debugging. JavaScript code ko minify aur transpile karne ke baad, original source code ko trace karna mushkil hota hai. Is problem ko solve karne ke liye, hum source maps ka use karte hain. Yeh blog main, hum detail mein samjhenge ki source maps kya hote hain, kaise kaam karte hain, aur unko kaise implement karte hain.

Source Maps Kya Hain?

Source maps ek JSON file hoti hai jo map karti hai minified ya transpiled code ko original source code se. Jab bhi humara code browser mein run hota hai, browser source map file ko read karke original source code ko identify karta hai. Is tarah se, agar code mein koi error aata hai toh hum easily original code ko debug kar sakte hain.

Source Maps Kaise Kaam Karte Hain?

Source maps ka basic idea yeh hai ki jab code ko transpile ya minify kiya jata hai, ek separate file create hoti hai jo batati hai ki minified code ka kaunsa part original code ke kaunse part se map hota hai. Yeh file .map extension ke saath hoti hai. Browser jab minified code ko run karta hai, toh yeh source map file ko bhi read karta hai aur errors ko original code ke context mein show karta hai.

Example

Maan lijiye humare paas ek simple JavaScript file hai app.js:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");

Is code ko agar hum minify karte hain, toh yeh kuch is tarah se dikhayi dega:

function greet(n){console.log("Hello, "+n+"!")}greet("World");

Agar is minified code mein error aata hai, toh without source map humare liye error ko trace karna mushkil hoga. Lekin agar hum source map use karte hain, toh error message original code ke context mein milega.

Source Maps Kaise Generate Karein?

Different build tools aur frameworks ke through hum source maps generate kar sakte hain. Aayiye kuch common tools aur frameworks ke examples dekhte hain.

Using Webpack

Webpack ek popular bundler hai jo source maps generate kar sakta hai. Webpack mein source maps generate karne ke liye, hum webpack.config.js file mein configuration karte hain:

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  devtool: 'source-map' // Yeh line source maps generate karti hai
};

Using Babel

Babel ek JavaScript transpiler hai jo modern JavaScript code ko backward compatible versions mein transpile karta hai. Babel ke through source maps generate karne ke liye, hum .babelrc file mein configuration karte hain:

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

Using TypeScript

TypeScript code ko JavaScript mein transpile karte waqt bhi hum source maps generate kar sakte hain. TypeScript configuration file tsconfig.json mein hum kuch is tarah se configuration karte hain:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Source Maps Kaise Use Karein?

Source maps ko use karna kaafi simple hai. Jab humara code run hota hai aur agar koi error aata hai, toh browser console mein error message original source code ke line number ke saath show hota hai. Isse hum easily debug kar sakte hain.

Example

Maan lijiye humare minified code mein error aata hai:

function greet(n){console.log("Hello, "+n+"!")}greet();

Is code mein greet function ko call karte waqt argument pass nahi kiya gaya hai. Agar humare paas source map available hai, toh browser console mein error kuch is tarah se dikhayi dega:

Uncaught TypeError: Cannot read property 'split' of undefined
    at greet (app.js:2)
    at app.js:5

Source map ki wajah se, hum easily dekh sakte hain ki error greet function ke call par hai aur original code mein kaunse line par hai.

Conclusion

Source maps JavaScript development mein ek powerful tool hain jo debugging process ko kaafi simplify kar dete hain. Yeh humare transpiled aur minified code ko original source code ke saath map karte hain, jisse hum easily errors ko trace aur fix kar sakte hain. Different tools aur frameworks jaise Webpack, Babel aur TypeScript ke saath source maps ko generate aur use karna kaafi straightforward hai.