//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");

//移動位數(shù)
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左移一位并在最后加一個(gè)符號位
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進(jìn)行與運(yùn)算，獲取字符中已經(jīng)生成好的后5位
    //從低位的5位開始作為第一個(gè)字符
    vlq >>>= VLQ_BASE_SHIFT;//vlq=vlq>>>5 
    //第三步：vlq右移5位用于截取低位的5位，對剩下的數(shù)值繼續(xù)進(jìn)行操作
    if (vlq > 0) {
      //說明后面還有數(shù)值，則要在現(xiàn)在這個(gè)字符開頭加上連續(xù)位1
      digit |= VLQ_CONTINUATION_BIT;//digit=digit|100000,與100000進(jìn)行或運(yùn)算
    }
    encoded = encoded+base64.encode(digit);//第四步:生成的vlq字符進(jìn)行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.獲取連續(xù)位標(biāo)識

    integer =integer & 11111;//3.移除符號位獲取后5位

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

    if (has_continuation_bit) {
      //5.有連續(xù)位
      shift += 5;//移動位數(shù)
    } else {
      //6.沒有連續(xù)位，處理獲取到的有效值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新建一個(gè)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];
    //獲取不同節(jié)點(diǎn)類型對應(yīng)的生成方法
    
    //....
  

    //調(diào)用
    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);//用于遍歷，執(zhí)行節(jié)點(diǎn)下的節(jié)點(diǎn)的方法
    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步:執(zhí)行內(nèi)部_append方法
  append(str: string): void {
    this._flush();
    const { line, column, filename, identifierName } = this._sourcePosition;
    this._append(str, line, column, identifierName, filename);
  }
  
  //第2步:計(jì)算傳遞進(jìn)來的字符串參數(shù)對應(yīng)的位置
  _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) {
    //排除開頭是換行符的情況，其他情況執(zhí)行標(biāo)記
      this._mark(line, column, identifierName, filename);
    }

    // Now, find each reamining newline char in the string.
    while (i !== -1) {
    //2-1.當(dāng)存在換行符時(shí)，改變行數(shù)
      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);//改變行數(shù),行數(shù)+1
      }
      i = str.indexOf("\n", last);//尋找下一個(gè)換行符
    }
    //2-2.改變列數(shù)，列數(shù)加上字符的長度
    this._position.column += str.length - last;
  }
  
  //第3步：調(diào)用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步：將前后行列信息對應(yīng)起來后對位置信息進(jìn)行編碼
  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,
            },
    });
  }
}