滋 TS 源码（二）- 开始编译

戳蓝字「合格前端」关注咱们哦！前端

0. 回顾

上一篇，咱们把 VSCode 调试环境准备好了，启动调试后，进到了 lib/tsc 中，
断点停在了第一行。web

本文咱们开始往下调试了，深刻到 tsc 编译的整个过程当中。
不过在此以前，咱们需先对 VSCode 调试面板有一些了解，调试面板提供了多种调试功能。json

（1）F5 - Continue：执行到下一个断点
数组

（2）F10 - Step Over：执行下一行，不跳入函数内部
微信

（3）F11 - Step Into：代码执行到下一步，跳入函数内部
app

（4）⇧ F11 - Step Out：执行完当前函数，回到调用方
编辑器

（5）⇧ ⌘ F5 - Restart：从新启动调试
函数

（6）⇧ F5 - Stop：中止调试
学习

熟悉了这些调试功能以后，咱们才能在 TypeScript 源码中随意驰骋。flex

1. lib/tsc require 没法进入断点的问题

上一篇提到，断点停在了 lib/tsc 第一行，
这是调试配置 .vscode/launch.json 中 stopOnEntry 设为 true 的预期表现，

接着 lib/tsc 会 require ../built/local/tsc.js 文件，
而后，VSCode 会根据 ../built/local/tsc.js.map 反查对应的 .ts 源码，跳转到 src/tsc/tsc.ts 中。

ts.executeCommandLine(
  ...
);

因此，咱们应在 src/tsc/tsc.ts#L2 打个断点，以下所示，

然而我发现，在 VSCode 按 F5 继续执行，却没法从 lib/tsc 直接跳转到 src/tsc/tsc.ts 中。

咱们得按如下步骤操做才行。
（1）lib/tsc Step Over 到 require 那一行

（2）lib/tsc Step Into 跳转到 require 中

（3）代码会跳转到 src/compiler/core.ts#L1，而后再按 F5

（4）这样才能来到 src/tsc/tsc.ts#L2 的断点处

咱们看到 ts.sys.args 的值，正是 tsc 待编译的文件 debug/index.ts。

2. 解析 & 写文件

好了，终于能够正常的调试 .ts 源码了，咱们 Step Into 进入 ts.executeCommandLine 的具体实现中。
它位于 src/tsc/executeCommandLine.ts#L353，

export function executeCommandLine(
  ...
): void {
  ...
  if (...) {
    ...
  }
  else {
    executeCommandLineWorker(system, cb, commandLine);
  }
}

可见，executeCommandLine 接着会调用 executeCommandLineWorker，src/tsc/executeCommandLine.ts#L170，

function executeCommandLineWorker(
  ...
) {
  ...
  if (configFileName) {
    ...
  }
  else {
    ...
    if (isWatchSet(commandLineOptions)) {
      ...
    }
    else if (isIncrementalCompilation(commandLineOptions)) {
      ...
    }
    else {
      performCompilation(
        sys,
        reportDiagnostic,
        cb,
        { ...commandLine, options: commandLineOptions }
      );
    }
  }
}

而后调用 performCompilation，src/tsc/executeCommandLine.ts#L493，

function performCompilation(
  ...
) {
  ...
  const program = createProgram(programOptions);
  const exitStatus = emitFilesAndReportErrorsAndGetExitStatus(
    ...
  );
  ...
}

这里，performCompilation 会执行两个关键操做，
（1）createProgram 解析源代码
（2）emitFilesAndReportErrorsAndGetExitStatus 将编译结果写文件

本文以后的几篇文章，咱们先详细的介绍源码的解析过程，
而后再回过头来介绍 emitFilesAndReportErrorsAndGetExitStatus。

3. 调用 parser 解析单个文件

首先，createProgram 位于 src/compiler/program.ts#L713，这个函数有 2665 行，
有不少辅助函数，它实际是在 src/compiler/program.ts#L988 这里就返回了。

处理待编译的源文件 debug/index.ts，发生在 src/compiler/program.ts#L873，forEach 中，

export function createProgram(...): Program {
  ...
  if (structuralIsReused !== StructureIsReused.Completely) {
    ...

    forEach(rootNames, name => processRootFile(name, /*isDefaultLib*/ false, /*ignoreNoDefaultLib*/ false));

    ...
  }

  ...
  const program: Program = {
    ...
  };

  ...
  return program;

  ...
}

它逐个处理了 TypeScript 待编译的文件，咱们当前示例项目中，只有一个文件，
能够看到，rootNames 数组的惟一元素正是 debug/index.ts。

随后，forEach 会调用 processRootFile，src/compiler/program.ts#L2041，

function processRootFile(...) {
  processSourceFile(...);
}

processRootFile 调用 processSourceFile，src/compiler/program.ts#L2231，

function processSourceFile(...): void {
  getSourceFileFromReferenceWorker(
    ...
  );
}

processSourceFile 调用 getSourceFileFromReferenceWorker，src/compiler/program.ts#L2186，

function getSourceFileFromReferenceWorker(
  ...

  if (hasExtension(fileName)) {
    ...

    const sourceFile = getSourceFile(fileName);
    ...
    return sourceFile;
  }
  else {
    ...
  }
}

getSourceFileFromReferenceWorker 调用 getSourceFile，
它是 getSourceFileFromReferenceWorker 传入的一个参数，
具体实现位于 src/compiler/program.ts#L2234，

function processSourceFile(...): void {
  getSourceFileFromReferenceWorker(
    ...
    fileName => findSourceFile(fileName, toPath(fileName), isDefaultLib, ignoreNoDefaultLib, refFile, packageId), // TODO: GH#18217
    ...
  );
}

接着会调用 findSourceFile，src/compiler/program.ts#L2273，

function findSourceFile(...): SourceFile | undefined {
  ...
  const file = host.getSourceFile(
    ...
  );
  ...
  return file;
}

而后调用 host.getSourceFile，src/compiler/program.ts#L78，
先读文件，而后又调用了 createSourceFile，

function getSourceFile(...): SourceFile | undefined {
  ...
  try {
    ...
    text = compilerHost.readFile(fileName);
    ...
  }
  catch (e) {
    ...
  }
  return text !== undefined ? createSourceFile(fileName, text, languageVersion, setParentNodes) : undefined;
}

createSourceFile 位于 src/compiler/parser.ts#L515，咱们终于看到 parser 的影子了。

总结

以上咱们分析了从命令行 lib/tsc 开始，到调用 parser 解析每一个文件的过程，
逻辑上来看，编译过程当中，TypeScript 会建立一个 Program 对象，
这个 Program 对象中，会包含多个 SourceFile。

每个 SourceFile 都是单独读文件，而后进行解析的。
下文咱们要深刻研究 SourceFile 究竟是怎样解析的，这会涉及 Compiler 中的词法和语法分析过程。

下面，用一张图来总结本文涉及到的全部文件和方法，
createProgram 和 createSourceFile 是两个关键环节。

参考

TypeScript v3.7.3

❤️ 看完两件事

若是你以为这篇内容对你挺有益，我想邀请你帮我两个小忙：

点个「在看」，让更多的人也能看到这篇内容
关注公众号「全栈大佬的修炼之路」，每周学习一个新技术，公众号后台回复「学习资料」免费送给你精心准备的全栈进阶资料。

本文分享自微信公众号 - 全栈大佬的修炼之路（gh_7795af32a259）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。