在上一小节，我带你实现了一个简单的 JavaScript AST 解析器，你也应该对词法分析和语法分析底层原理有了一定的了解。那么在本小节的内容中，我们将基于 AST 解析器来实现一个模块打包工具(Bundler)，也就是实现一个精简版的 Rollup。通过本节的实战学习，你不仅能对各种 AST 的各种操作信手拈来，还能够对 JavaScript 模块打包工具本身有更加深刻的理解。

# 实现思路梳理

首先我们来梳理一下整体的实现思路，如下图所示:

第一步我们需要获取模块的内容并解析模块 AST，然后梳理模块间的依赖关系，生成一张模块依赖图(ModuleGraph)。

接下来，我们根据模块依赖图生成拓扑排序后的模块列表，以保证最后的产物中各个模块的顺序是正确的，比如模块 A 依赖了模块 B，那么在产物中，模块 B 的代码需要保证在模块 A 的代码之前执行。

当然，Tree Shaking 的实现也是很重要的一环，我会带你实现一个基于 import/export 符号分析的 Tree Shaking 效果，保证只有被 import 的部分被打包进产物。最后，我们便可以输出完整的 Bundle 代码，完成模块打包。

# 开发环境搭建

我们先来搭建一下项目的基本开发环境，首先新建目录my-bundler，然后进入目录中执行 pnpm init -y 初始化，安装一些必要的依赖:

pnpm i magic-string -S
pnpm i @types/node tsup typescript typescript-transform-paths -D

@前端进阶之旅: 代码已经复制到剪贴板

新建tsconfig.json，内容如下:

{
  "compilerOptions": {
    "target": "es2016",
    "allowJs": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "baseUrl": "src",
    "rootDir": "src",
    "declaration": true,
    "plugins": [
      {
        "transform": "typescript-transform-paths"/* 支持别名 */
      },
      {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true/* 支持类型文件中的别名 */
      }
    ],
    "paths": {
      "*": ["./*"],
      "ast-parser": ["../../ast-parser"]/* AST 解析器的路径*/
    }
  },
  "include": ["src"],
  "references": [{ "path": "../ast-parser" }]
}

@前端进阶之旅: 代码已经复制到剪贴板

然后在 package.json 中添加如下的构建脚本:

"scripts": {
  "dev": "tsup ./src/rollup.ts --format cjs,esm --dts --clean --watch",
  "build": "tsup ./src/rollup.ts --format cjs,esm --dts --clean --minify"
},

@前端进阶之旅: 代码已经复制到剪贴板

接下来，你可以在src目录下新建index.ts，内容如下:

// src/index.ts
import { Bundle } from './Bundle';

export interface BuildOptions {
  input: string;
}

export function build(options: BuildOptions) {
  const bundle = new Bundle({
    entry: options.input
  });
  return bundle.build().then(() => {
    return {
      generate: () => bundle.render()
    };
  });
}

@前端进阶之旅: 代码已经复制到剪贴板

由此可见，所有核心的逻辑我们封装在了 Bundle 对象中，接着新建Bundle.ts及其依赖的Graph.ts，添加如下的代码骨架:

// Bundle.ts
export class Bundle {
  graph: Graph;
  constructor(options: BundleOptions) {
    // 初始化模块依赖图对象
    this.graph = new Graph({
      entry: options.entry,
      bundle: this
    });
  }

  async build() {
    // 模块打包逻辑，完成所有的 AST 相关操作
    return this.graph.build();
  }

  render() {
    // 代码生成逻辑，拼接模块 AST 节点，产出代码
  }

  getModuleById(id: string) {
    return this.graph.getModuleById(id);
  }

  addModule(module: Module) {
    return this.graph.addModule(module);
  }
}

// Graph.ts
// 模块依赖图对象的实现
import { dirname, resolve } from 'path';
export class Graph {
  entryPath: string;
  basedir: string;
  moduleById: Record<string, Module> = {};
  modules: Module[] = [];

  constructor(options: GraphOptions) {
    const { entry, bundle } = options;
    this.entryPath = resolve(entry);
    this.basedir = dirname(this.entryPath);
    this.bundle = bundle;
  }

  async build() {
    // 1. 获取并解析模块信息
    // 2. 构建依赖关系图
    // 3. 模块拓扑排序
    // 4. Tree Shaking, 标记需要包含的语句
  }

  getModuleById(id: string) {
    return this.moduleById[id];
  }

  addModule(module: Module) {
    if (!this.moduleById[module.id]) {
      this.moduleById[module.id] = module;
      this.modules.push(module);
    }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

接下来，我们就正式开始实现打包器的模块解析逻辑。

# 模块 AST 解析

我们基于目前的 Graph.ts 继续开发，首先在 Graph 对象中初始化模块加载器(ModuleLoader):

// src/Graph.ts
import { dirname, resolve } from 'path';
export class Graph {
  constructor(options: GraphOptions) {
    // 省略其它代码
    // 初始化模块加载器对象
    this.moduleLoader = new ModuleLoader(bundle);
  }

  async build() {
    // 1. 获取并解析模块信息，返回入口模块对象
    const entryModule = await this.moduleLoader.fetchModule(
      this.entryPath,
      null,
      true
    );
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

然后添加ModuleLoader.ts，代码如下:

// src/ModuleLoader.ts
export class ModuleLoader {
  bundle: Bundle;
  resolveIdsMap: Map<string, string | false> = new Map();
  constructor(bundle: Bundle) {
    this.bundle = bundle;
  }

  // 解析模块逻辑
  resolveId(id: string, importer: string | null) {
    const cacheKey = id + importer;
    if (this.resolveIdsMap.has(cacheKey)) {
      return this.resolveIdsMap.get(cacheKey)!;
    }
    const resolved = defaultResolver(id, importer);
    this.resolveIdsMap.set(cacheKey, resolved);
    return resolved;
  }

  // 加载模块内容并解析
  async fetchModule(
    id: string,
    importer: null | string,
    isEntry = false,
    bundle: Bundle = this.bundle,
    loader: ModuleLoader = this
  ): Promise<Module | null> {
    const path = this.resolveId(id, importer);
    // 查找缓存
    const existModule = this.bundle.getModuleById(path);
    if (existModule) {
      return existModule;
    }
    const code = await readFile(path, { encoding: 'utf-8' });
    // 初始化模块，解析 AST
    const module = new Module({
      path,
      code,
      bundle,
      loader,
      isEntry
    });
    this.bundle.addModule(module);
    // 拉取所有的依赖模块
    await this.fetchAllDependencies(module);
    return module;
  }

  async fetchAllDependencies(module: Module) {
    await Promise.all(
      module.dependencies.map((dep) => {
        return this.fetchModule(dep, module.path);
      })
    );
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

主要由 fetchModule 方法完成模块的加载和解析，流程如下:

1. 调用 resolveId 方法解析模块路径
1. 初始化模块实例即 Module 对象，解析模块 AST
1. 递归初始化模块的所有依赖模块

其中，最主要的逻辑在于第二步，即 Module 对象实例的初始化，在这个过程中，模块代码将会被进行 AST 解析及依赖分析。接下来，让我们把目光集中在 Module 对象的实现上。

OK，我们可以来梳理一下解析 AST 节点主要做了哪些事情:

调用 ast-parser 将代码字符串解析为 AST 对象。
遍历 AST 对象中的各个语句，以语句的维度来进行 AST 分析，通过语句的分析结果来构造作用域链和模块依赖关系。

# 实现思路梳理

# 开发环境搭建

# 模块 AST 解析

# 模块依赖图绑定

手写 Bundler-实现代码打包和Tree Shaking|前端工程化

手写 Bundler-实现代码打包和Tree Shaking|前端工程化