# An introduction to source maps - Nicolò Ribaudo 🏳️‍🌈🇪

{%hackmd @JSDC2024/INuUpOqWS42gD1_pz5S4Bg %}

Slido：
https://app.sli.do/event/n7NQY9txqFvKQbmqvqmsVJ

> 開始做筆記

- https://nicr.dev/
- [Slides](https://docs.google.com/presentation/d/11p1b4aZ6RNHCMo3jyR8nvUlSasISaWf6CSx--fsFS6Q/edit)
-

## What are Source Map
- Compile Language
- Browser must know
- Code Write != Code Run
- How to debug
-

source maps let devtools map the running code to the original code

- SourceMap
- Transpiled Code needed
- C++ or Rust --> WA also needed

{
    "verions": 3,        // SourceMap 的版本
    "file": ""           // 哪個檔案
    "names": []          // 變數名稱
    "sources": []        // 來源檔案路徑
    "sourcesContent": [] // 來源檔案內容
    "mappings": ""       // 對應位置（重要！）
}

## Mapping
- source-map-visualization https://sokra.github.io/source-map-visualization/

## Standardized
- Google + Mozilla
-
https://tc39.es/ecma426/

### Why?
- Implement in a same way
- Application is completed
- With document, we can share the standing

## New Features
- `ignoreList: number[]`
- Hide the implement
-

## Scopes

## Q & A
1. Should we include source map in npm package? Because the file size is very large. If include it, can debug in devtools. If not, can reduce the npm package size.
- Usually included
- Especially for browser and other environmet

2. What's the future between Typescript and Babel in your opinion.
- Good, intesting question
- TypeScript wins

3. how do third-party babel plugins ensure that source maps work correctly when transforming code?

4.Where is JavaScript heading in your opinion.
- Starts from small utilities
- lodash
- moment
- Now JavaScript is popular
-

5. When you share the scope proposal, you provide an example with optimized code (inline code). Is there a tool for this?
- Yes
- Closure Compiler and transpiler from Google

> 聊天區
>

請問晚餐要吃什麼？
* 咖哩