Source map
- TypeScript course
- Expert
- Lesson 19/35
- 4 min
Learn sourceMap and inlineSourceMap.
What is a source map?
A source map links compiled JavaScript back to the source TypeScript file. sourceMap: true produces a .js.map file for each .js; debuggers use it to show the user original TypeScript lines.
{
"compilerOptions": {
"sourceMap": true
}
}Without a source map, error stacks show compiled JavaScript lines.
sourceMap vs inlineSourceMap
sourceMap: true produces a .js.map file alongside each JavaScript file; this is the common choice for multi-file projects. inlineSourceMap: true embeds the map inside the .js and produces no separate file; this suits single-file distributions.
// sourceMap: dist/index.js + dist/index.js.map
// inlineSourceMap: dist/index.js (map embedded)The two are not used together; one is chosen.
Practice Compute the source map file name
Write a mapFileName function that takes a JavaScript file path and returns the source map file name (append .map to the .js extension). If the inline parameter is true, return "(inline)" instead since the map is embedded. Print the result of mapFileName("dist/index.js", false).
Starter code
// mapFileName: JavaScript dosyasına karşılık map adını verir
// gömülü modda "(inline)" döndür
// ayrı dosya durumunda uzantıya map eki ekle
// "dist/index.js", false için sonucu yazdırSample solution
function mapFileName(jsPath: string, inline: boolean): string {
if (inline) return "(inline)";
return jsPath + ".map";
}
console.log(mapFileName("dist/index.js", false));Expected output
dist/index.js.map
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does `inlineSourceMap: true` do?
- Produces only .d.ts files
- Produces a separate .js.map file
- Embeds the source map inside the .js file Correct answer
- Disables source map generation
Explanation: inlineSourceMap: true embeds the source map as base64 at the end of the .js file instead of a separate file; sourceMap produces a separate .js.map, noEmit disables output, and emitDeclarationOnly produces only .d.ts.
2 Enable source map
{
"compilerOptions": {
"____": true
}
}{
"compilerOptions": {
"sourceMap": true
}
}Explanation: To produce a separate .js.map file use sourceMap; inlineSourceMap embeds the map, noEmit disables output, and map is not a valid option name.
3 Source map parts
| Term | Meaning |
|---|---|
sourceMap: true |
produces a separate .js.map |
inlineSourceMap: true |
embeds the map in .js |
.js.map |
map file |
base64 |
embedded map encoding |