Web Frontend: Source Map

20th August 2020 at 2:19pm
Web Frontend

Source map 是一种技术,可以将转换过的 CSS / JS 与原始代码关联起来。这篇 文章 非常好。

转换的原因可能有:

  • 将使用了新 JS 语义的代码转换成老运行环境能运行的 JS 代码,比如某浏览器可能还不支持 arrow function,那可以用 Babel 将 arrow function 转成普通函数给浏览器运行
  • 将一种类 JS 语言的代码转换成 JS 代码,如 Coffee、TypeScript 等
  • 压缩代码或者混淆代码的工具

需要由相应的工具生成 source map,如 Babel、TypeScript 等。

Source map 的重点在于,将转义后的代码的每个表达式等,与原始代码关联起来。具体的关联细节不重要,有兴趣看看前面提到的文章。

Webpack

如果在开发过程中使用的是 webpack-dev-server,在 Webpack 配置文件(一般是 webpack.config.js)中加入 devtool: 'source-map' 选项来生成 source map(文档)。