5分钟教你使用前端source-map

梅一一
546 阅读2分钟

191726-1723115846a1c4.jpg

前言

source-map的主要作用就是建立源文件的映射，让你在生产环境也能发现报错时也能知道对应的位置

环境搭建

  1. 安装vscode或idea（本次案例使用vscode)
  2. 安装依赖（本次案例使用pnpm + webpack）
pnpm init

/** @description 防止出现重大更新，下载时固定大版本 */

pnpm i webpack@5 webpack-cli@5 lodash@4 -D

3. 创建webpack.config.mjs模板文件（webpack默认读取根目录webpack.config.*文件）

import path from "path";

const __dirname = path.resolve();

/** @type {import("webpack-cli").ConfigOptions} */
export default {
  entry: "./src/index.mjs",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  // webpack4开始mode改成production默认压缩代码
  mode: "production",
};
  1. 创建src/index.mjs模板文件
// webpack 官方 案例
import { join } from "lodash";

function component() {
  const element = document.createElement("div"); // 执行这一行需要引入 lodash

  element.innerHTML = join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

// 此处用来触发报错
console.log(abb);
  1. 创建index.html模板文件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<!-- 此处用来加载最终打包js文件 -->
<script src="./dist/main.js"></script>

</html>

6. 更改package.json命令

  "scripts": {
    "build": "webpack"
  },

7. chrome浏览器启动sourcemap读取

f12打开控制台

image.png

image.png

到此，环境配置已完成

生产环境验证

我们终端直接运行pnpm build

image.png

可以看到webpack会创建出来dist/main.js文件

image.png

我们直接运行index.html

image.png

image.png

点进去报错可以发现只有编译压缩后的代码，以及看不到行列信息，一脸懵

现在启动source-map再试一次，webpack.config.mjs 添加 属性 devtool: "source-map"

image.png

可以看到dist目录中多了个同名的map文件，现在刷新浏览器再看一下报错信息

image.png

可以发现跟上次报错不一样了，我们再点进去报错...

image.png

可以看到源码了，并且有对应的错误位置 ，我们再点进去main.js看下，跟上一次区别就是多了一行//# sourceMappingURL=xxx 的注释。 浏览器自动检测sourceMap文件

image.png

我们尝试在源文件中修改map文件名，再次刷新，会发现与第一次打包没生成source-map报错一致

image.png

image.png

总结以及个人建议

  1. source-map主要用于生产环境，目的是方便找到错误对应的源码位置
  2. 只建议使用外联，不建议使用内联source-map，避免源码被恶意破解以及减少文件大小
  3. 前端打包时统一打包有source-map的版本，由后端或运维对.map文件进行返回过滤 dog.jpg
avatar
文章
阅读
粉丝