webpack + React 单页实践#6：添加 source map

[S-T-D]

• 什么是
• 开发环境配置
• 生产环境配置
• 代码地址
• 参考资料
   

到目前为止，大部分开发环境所需配置都已经配好了，这篇来看看开发环境如何调试代码。

 

什么是

我们都知道经过 webpack 打包后，代码都是编译压缩甚至混淆过的，如果代码中出现了错误，打包后的代码对我们调试找问题来说基本上没什么用。source map 的作用就是提供一个映射，将打包后的代码映射到我们编写的源码。

关于 source map 的详细介绍和原理可以查看这里。

 

开发环境配置

a. 没有 source map

在配置之前，先看看目前没有 source map 是什么样子。

我们在 app.tsx 中 第 12 行的位置调用一个不存在的方法来抛出一个错误：

import s from './app.scss';
import kb37 from 'https://raw.githubusercontent.com/S-T-D/my-blog/main/assets/37kb.png';
import kb5 from 'https://raw.githubusercontent.com/S-T-D/my-blog/main/assets/5kb.png';

const App = () => {
    const title: string = 'A beautiful page!';

    return ( 
        <>
            <h2 className={s.title}>{title}</h2> 
            {
                window.unExistMethod()      // 第 12 行
            }
            <img src={kb37} />
            <img src={kb5} />
        </>
    )
}

export default App;

运行项目后，浏览器控制台错误如下：

可以看到这里显示的行号是 app.tsx:22，但我们实际的代码是第 12 行。

然后点击 app.tsx:22 跳转到 app.tsx 如下：

可以看到代码是被转换过后的，不便于定位错误的具体位置。

这里的代码逻辑比较简单，实际项目会更复杂，如果没有 source map，非常不利于开发调试。

 

b. 配置 source map

// webpack.config.js
const path = require('path');

module.exports = {
    // ...
    devtool: 'eval-source-map',
    // ...
};

这里我按官方文档的推荐，使用的是 eval-source-map。devtool 字段有很多种取值，具体使用哪个视情况而定。

重启看运行效果：

可以看到错误提示的行号已经显示正确了。

点击行号进入文件：

这里的文件和我们的源码一模一样了，可以清楚地看到错误了。

 

生产环境配置

对于生产环境来说，一般可以选择不生成 source map，然后选择其他的错误收集工具比如 sentry 来收集生产环境的报错信息。

如果为了定位线上错误，必须生成 source map 的话，有一个原则必须得遵守，那就是不能把 source map 文件暴露给用户，具体说明参见这里。

 

代码地址

webpack-react-spa-template-project

 

参考资料

• JavaScript Source Map 详解
• devtool