解读SourceMap

//src/index.js
function a() {
  for (let i = 0; i < 3; i++) {
    console.log('s');
  }
}
a();

//dist/main-145900df.js
!function(){for(let o=0;o<3;o++)console.log("s")}();
//# sourceMappingURL=main-145900df.js.map

//dist/main-145900df.js.map
{
  "version": 3,
  "file": "main-145900df.js",
  "mappings": "CAAA,WACE,IAAK,IAAIA,
  EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
  "sources": ["webpack://source-map-webpack-demo/./src/index.js"],
  "sourcesContent": ["function a() {\n  for (let i = 0; i < 3; i++) {\n    console.log('s');\n  }\n}\na();"],
  "names": ["i", "console", "log", "a"],
  "sourceRoot": ""
}

"mappings": "CAAA,WACE,IAAK,IAAIA,
  EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",

//   Continuation
//   |    Sign
//   |    |
//   V    V
//   101011

//https://github.com/mozilla/source-map/blob/HEAD/lib/base64-vlq.js
const base64 = require("./base64");

//移动位数
const VLQ_BASE_SHIFT = 5;

// binary: 100000
const VLQ_BASE = 1 << VLQ_BASE_SHIFT;
//1左移5位：100000=32

// binary: 011111
const VLQ_BASE_MASK = VLQ_BASE - 1;

// binary: 100000
const VLQ_CONTINUATION_BIT = VLQ_BASE;

//符号位在最低位
//1.1左移一位并在最后加一个符号位
function toVLQSigned(aValue) {
  return aValue < 0 ? (-aValue << 1) + 1 : (aValue << 1) + 0;
}

/**
 * Returns the base 64 VLQ encoded value.
 */
function base64VLQ_encode(aValue) {
  let encoded = "";
  let digit;

  let vlq = toVLQSigned(aValue);//第一步：左移一位，最后添加符号位
  
  do {
    digit = vlq & VLQ_BASE_MASK;
    //第二步：vlq和011111进行与运算，获取字符中已经生成好的后5位
    //从低位的5位开始作为第一个字符
    vlq >>>= VLQ_BASE_SHIFT;//vlq=vlq>>>5 
    //第三步：vlq右移5位用于截取低位的5位，对剩下的数值继续进行操作
    if (vlq > 0) {
      //说明后面还有数值，则要在现在这个字符开头加上连续位1
      digit |= VLQ_CONTINUATION_BIT;//digit=digit|100000,与100000进行或运算
    }
    encoded = encoded+base64.encode(digit);//第四步:生成的vlq字符进行base64编码并拼接
  } while (vlq > 0);

  return encoded;
};
exports.encode = base64VLQ_encode;

//https://github.com/Rich-Harris/vlq/blob/HEAD/src/index.js
/** @param {string} string */
export function decode(string) {
  /** @type {number[]} */
  let result = [];

  let shift = 0;
  let value = 0;

  for (let i = 0; i < string.length; i += 1) {//从左到右遍历字母
    let integer = char_to_integer[string[i]];//1.base64解码

    if (integer === undefined) {
      throw new Error('Invalid character (' + string[i] + ')');
    }

    const has_continuation_bit = integer & 100000;//2.获取连续位标识

    integer =integer & 11111;//3.移除符号位获取后5位

    value = value + (integer << shift);
    //4.从低到高拼接有效值

    if (has_continuation_bit) {
      //5.有连续位
      shift += 5;//移动位数
    } else {
      //6.没有连续位，处理获取到的有效值value
      const should_negate = value & 1;//获取符号位

      value =value >>>1;//7.右移一位去除符号位,获取最终有效值

      if (should_negate) {
        result.push(value === 0 ? -0x80000000 : -value);
      } else {
        result.push(value);
      }

      // reset
      value = shift = 0;
    }
  }

  return result;
}

function a() {
  for (let i = 0; i < 3; i++) {
    console.log('s');
  }
}
a();

!function(){for(let o=0;o<3;o++)console.log("s")}();
//# sourceMappingURL=main-145900df.js.map

//dist/main-145900df.js.map
{
  "version": 3,
  "file": "main-145900df.js",
  "mappings": "CAAA,WACE,IAAK,IAAIA,
  EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
  "sources": ["webpack://source-map-webpack-demo/./src/index.js"],
  "sourcesContent": ["function a() {\n  for (let i = 0; i < 3; i++) {\n    console.log('s');\n  }\n}\na();"],
  "names": ["i", "console", "log", "a"],
  "sourceRoot": ""
}

//packages/babel-generator/src/index.ts
export default function generate(
  ast: t.Node,
  opts?: GeneratorOptions,
  code?: string | { [filename: string]: string },
) {
  const gen = new Generator(ast, opts, code);
  //1.传递ast新建一个Generator对象
  return gen.generate();
}
class Generator extends Printer {
  generate() {
    return super.generate(this.ast);
  }
}

//packages/babel-generator/src/printer.ts
class Printer {
  generate(ast) {
    this.print(ast);
    //2.通过ast生成代码
    this._maybeAddAuxComment();

    return this._buf.get();
  }
  
  print(node, parent?) {
  
    if (!node) return;

    const oldConcise = this.format.concise;
    if (node._compact) {
      this.format.concise = true;
    }

    const printMethod = this[node.type];
    //获取不同节点类型对应的生成方法
    
    //....
  

    //调用
    this.withSource("start", loc, () => {
      printMethod.call(this, node, parent);
    });

    // this._printTrailingComments(node);

    // if (shouldPrintParens) this.token(")");

    // end
    this._printStack.pop();

    this.format.concise = oldConcise;
    this._insideAux = oldInAux;
  }
}

//packages/babel-generator/src/generators/statements.ts
export function SwitchCase(this: Printer, node: t.SwitchCase) {
  if (node.test) {
    this.word("case");
    this.space();
    this.print(node.test, node);//用于遍历，执行节点下的节点的方法
    this.token(":");
  } else {
    this.word("default");
    this.token(":");
  }

  if (node.consequent.length) {
    this.newline();
    this.printSequence(node.consequent, node, { indent: true });
  }
}

//packages/babel-generator/src/printer.ts
class Printer {
   constructor(format: Format, map: SourceMap) {
        this._buf = new Buffer(map);
  }
  
  //...
  
  _append(str: string, queue: boolean = false) {
    if (queue) this._buf.queue(str);
    else this._buf.append(str);
  }
 
  word(str: string): void {
    // prevent concatenating words and creating // comment out of division and regex
    if (
      this._endsWithWord ||
      (this.endsWith(charCodes.slash) && str.charCodeAt(0) === charCodes.slash)
    ) {
      this._space();
    }

    this._maybeAddAuxComment();

    this._append(str);

    this._endsWithWord = true;
  }
  
  token(str: string): void {
    // space is mandatory to avoid outputting <!--
    // http://javascript.spec.whatwg.org/#comment-syntax
    const lastChar = this.getLastChar();
    const strFirst = str.charCodeAt(0);
    if (
      (str === "--" && lastChar === charCodes.exclamationMark) ||
      // Need spaces for operators of the same kind to avoid: `a+++b`
      (strFirst === charCodes.plusSign && lastChar === charCodes.plusSign) ||
      (strFirst === charCodes.dash && lastChar === charCodes.dash) ||
      // Needs spaces to avoid changing '34' to '34.', which would still be a valid number.
      (strFirst === charCodes.dot && this._endsWithInteger)
    ) {
      this._space();
    }

    this._maybeAddAuxComment();
    this._append(str);
  }
  
}

//packages/babel-generator/src/buffer.ts
class Buffer {
    constructor(map?: SourceMap | null) {
        this._map = map;
      }
    
   //用于记录生成代码的位置
     _position = {
        line: 1,
        column: 0,
      };

 
  //第1步:执行内部_append方法
  append(str: string): void {
    this._flush();
    const { line, column, filename, identifierName } = this._sourcePosition;
    this._append(str, line, column, identifierName, filename);
  }
  
  //第2步:计算传递进来的字符串参数对应的位置
  _append(
    str: string,
    line: number | undefined,
    column: number | undefined,
    identifierName: string | undefined,
    filename: string | undefined,
  ): void {
    this._buf += str;
    this._last = str.charCodeAt(str.length - 1);

    let i = str.indexOf("\n");//查找换行符位置
    let last = 0;
    
    if (i !== 0) {
    //排除开头是换行符的情况，其他情况执行标记
      this._mark(line, column, identifierName, filename);
    }

    // Now, find each reamining newline char in the string.
    while (i !== -1) {
    //2-1.当存在换行符时，改变行数
      this._position.line++;
      this._position.column = 0;
      last = i + 1;//换行符后一位

      // We mark the start of each line, which happens directly after this newline char
      // unless this is the last char.
      if (last < str.length) {
        this._mark(++line, 0, identifierName, filename);//改变行数,行数+1
      }
      i = str.indexOf("\n", last);//寻找下一个换行符
    }
    //2-2.改变列数，列数加上字符的长度
    this._position.column += str.length - last;
  }
  
  //第3步：调用sourcemap对象的mark方法
  _mark(
    line: number | undefined,
    column: number | undefined,
    identifierName: string | undefined,
    filename: string | undefined,
  ): void {
    this._map?.mark(this._position, line, column, identifierName, filename);
  }
}

export default class SourceMap {
//第4步：将前后行列信息对应起来后对位置信息进行编码
  mark(
    generated: { line: number; column: number },
    line: number,
    column: number,
    identifierName?: string | null,
    filename?: string | null,
  ) {
    this._rawMappings = undefined;

    maybeAddMapping(this._map, {
      name: identifierName,
      generated,
      source:
        line == null
          ? undefined
          : filename?.replace(/\/g, "/") || this._sourceFileName,
      original:
        line == null
          ? undefined
          : {
              line: line,
              column: column,
            },
    });
  }
}