module bundlerの作り方(準備編)

今回は中身がどう動いているかを解説したいと思います。最初のこの記事では、最低限の実装を説明していくことにします。

webpack のアルゴリズムの仕組みはこちらを読んでください。

webpackの仕組みを簡潔に説明する - hiroppy's site

webpackの内部で動いているアルゴリズムの解説をします

blog.hiroppy.me

必要なステップ

必要なステップは以下の 3 つです。

エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく
コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する
runtime のコードテンプレートの作成
- IIFE(即時関数)箇所とそれに付随する引数の module 群

この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる)

モジュール解決

今回は説明しやすいように関数を 2 つに分けています。

すべてのモジュールの把握と ID 作成
コード内の require 部分を ID を置換

1. 使われるモジュールをすべて列挙し、ユニーク ID を添付させる

ここでのゴールは、モジュールのコードをすべて AST にしそれぞれのモジュールにユニークな ID を付与していくことです。

今回は、webpack でも使う JS のパーサーである acorn を使っても良いのですが、codegen がほしいので babel を使って行います。(もちろん、 acorn と escodegen を使っても良い)

@babel/parserでコードを AST に落とし、@babel/traverse でトラバースをし、@babel/generatorで AST からコードを生成します。

以下の処理を再帰させることにより、使用されるモジュールを列挙します。

ファイル名を取得する

require の declarations type は CallExpressionで calleeの type は Identifier となります。

1
const parser = require("@babel/parser");
2
const { default: traverse } = require("@babel/traverse");
3
const { default: generate } = require("@babel/generator");
4

5
const basePath = dirname(entryPath);
6
const ast = parser.parse(await promises.readFile(entryPath, "utf8"));
7

8
traverse(ast, {
9
  CallExpression({ node: { callee, arguments: args } }) {
10
    if (callee.type === "Identifier" && callee.name === "require") {
11
      const filePath = getScriptFilePath(basePath, args[0].value);
12
    }
13
  },
14
});

つまり、このように構文解析を行えば、呼び出されるモジュールファイルがわかります。そして、CJS では拡張子が省略可能であり、index.jsも.で省略可能なので、以下の処理が必要です。

1
function getFilename(filename) {
2
  // index.js === .
3
  if (filename === ".") {
4
    return "index.js";
5
  }
6

7
  // omit .js
8
  if (extname(filename) === "") {
9
    return `${filename}.js`;
10
  }
11

12
  return filename;
13
}

node_modules のファイルを読み込む

注意点は以下の通りです。

node_modules もxxx/yyyの形式でも動く
main フィールドがない場合は、'./index.js'を参照する
node_modules 内のモジュールの子供は./等でアクセスするため少し処理が複雑になる
- 再帰処理を行う時にxxxが来たらベースのパスをリセットし root の値にする
- そうでない場合は前回のベースのパスを引き継ぐために引数に渡す

また、この処理は以下の点がめんどくさいので一旦不完全として進めて行きたいと思います。

package.json のmodule, browser, exportsフィールドには対応しない
node_modules のディレクトリ昇格処理は行わない

1
function getScriptFilePath(basePath, filename) {
2
  if (isNodeModule(filename)) {
3
    return join(basePath, getFilename(filename));
4
  }
5

6
  // node_modules
7
  const moduleBasePath = join(basePath, "node_modules", filename);
8

9
  // e.g. require('a/b')
10
  // need to split by /
11
  if (filename.includes("/")) {
12
    const dir = dirname(moduleBasePath);
13
    const name = basename(moduleBasePath);
14

15
    return join(dir, getFilename(name));
16
  }
17

18
  // TODO: add module, browser, exports
19
  const { main } = require(join(moduleBasePath, "package.json"));
20

21
  // when main field is undefined, index.js will be an entry point
22
  return join(moduleBasePath, getFilename(main));
23
}

使われるモジュールのマップを作成する

これでバンドラーからモジュールへのファイルアクセスが行えたので、そのモジュールの中身を取得し AST に変換し、保持します。ここでは以下の情報を整理します。

id => module に振られたユニーク id
path => 絶対パス、require('./module1') の ./module1での検索は困難で書き方が多く一意でないため絶対パスが検索キー
ast => 後から再度使うので AST の形で保持しておく

1
const modulesMap = new Set();
2

3
// エントリーポイントは0番
4
modulesMap.add({
5
  id: 0,
6
  path: entryPath,
7
  ast: entryCodeAst,
8
});

ここで最初にモジュールをすべて把握するのかというと、あとからすべてのコードのrequireにモジュールの ID を振っていくため一度すべてのモジュールの対応表を作らなければなりません。

filename を id にしない理由

メリット
- どのファイルが読まれているかわかりやすい
- requireの引数を置換しなくてもいいので、実装が楽
  - 最終的にrequireを実行して走査するので、id の対応付けが必要でファイル名を id にすると単純なコードでは動く
デメリット
- bundle サイズが大きくなる
- ファイル階層、ファイル名の省略、拡張子の省略で一意な値にならない
  - require('xxxx) の xxxx とキー名を一緒にするのはコード内ですべて統一されている保証がないので危ない
  - 絶対パスに変換すればこの問題は解決するが、結局ソースコード内の変更を行っているし bundle サイズが大きくなるので無駄

なので、モジュールそれぞれに数値 id をふることにより上記の問題を解決するのが一般的です。

モジュールをキャッシュする

これを行うことにより、すでに読み込まれたモジュールの追加を防ぎ、Circular Dependency 防ぎます。以下の場合の対応を行わないと再帰が終わらずに無限にループします。

Circular Dependency の例

1
module.exports = "from entry";
2

3
const a = require("./module1");
4

5
console.log("main:", a);

1
console.log("module1:", a);
2

3
module.exports = "from module1";

以下のように現在走査しているファイルの絶対パスを使って確認を行います。

1
const hasAlreadyModule = Array.from(modulesMap).some(
2
  ({ path }) => path === filePath,
3
);

無ければ、追加し、そのモジュールはキャッシュされていないのでそのモジュールの依存を辿るために再帰を行います。

1
if (!hasAlreadyModule) {
2
  try {
3
    // node_modulesだったら現在のベースパスをリセット
4
    const nextDir = isNodeModule(args[0].value) ? entryDir : dirname(filePath);
5
    const code = readFileSync(filePath, "utf-8");
6
    const ast = parser.parse(code);
7

8
    modulesMap.add({
9
      id: modulesMap.size, // これで自動的にIDがインクリメントされていく
10
      ast,
11
      path: filePath,
12
    });
13
    walkDeps(ast, nextDir); // まだ見てないモジュールの中身を見に行く
14
  } catch (e) {
15
    console.warn("could not find the module:", e.message);
16
  }
17
}

全体コード

1
async function buildModulesMap(entryDir, entryFilename) {
2
  const modulesMap = new Set();
3
  const entryPath = getScriptFilePath(entryDir, `./${entryFilename}`);
4
  const entryCodeAst = parser.parse(await promises.readFile(entryPath, "utf8"));
5

6
  // add an entry point
7
  modulesMap.add({
8
    id: 0,
9
    path: entryPath, // an absolute path
10
    ast: entryCodeAst,
11
  });
12

13
  // start from the entry-point to check all deps
14
  walkDeps(entryCodeAst, entryDir);
15

16
  function walkDeps(ast, currentDir) {
17
    traverse(ast, {
18
      CallExpression({ node: { callee, arguments: args } }) {
19
        if (callee.type === "Identifier" && callee.name === "require") {
20
          const filePath = getScriptFilePath(currentDir, args[0].value);
21
          const hasAlreadyModule = Array.from(modulesMap).some(
22
            ({ path }) => path === filePath,
23
          );
24

25
          if (!hasAlreadyModule) {
26
            try {
27
              // reset the current directory when node_modules
28
              // ./ has 2 types which are local of the first party and local of the third party module
29
              const nextDir = isNodeModule(args[0].value)
30
                ? entryDir
31
                : dirname(filePath);
32
              const ast = parser.parse(readFileSync(filePath, "utf-8"));
33

34
              modulesMap.add({
35
                id: modulesMap.size,
36
                ast,
37
                path: filePath,
38
              });
39

40
              walkDeps(ast, nextDir);
41
            } catch (e) {
42
              console.warn("could not find the module:", e.message);
43
            }
44
          }
45
        }
46
      },
47
    });
48
  }
49

50
  return modulesMap;
51
}

2. すべてのコードの`require`を id に置換する

ここでのゴールは、先程生成したmodulesMapのコードのrequireの中身をすべて id を書き換えることです。

先程作成した以下の情報を使っていきます。

1
const modulesMap = new Set();
2

3
modulesMap.add({
4
  id: 0,
5
  path: entryPath, // 絶対パス
6
  ast: entryCodeAst,
7
});

それをすべて回しつつ、AST がすでにあるので再度トラバースを行い自身(modulesMap)の中に入っている他のモジュールを探しその ID をrequire部分を上書きします。

e.g. ./module.js === 1(id) => require('./module') ===>require(1)

1
for (const { id, ast, path } of modulesMap.values()) {
2
  traverse(ast, {
3
    CallExpression({ node: { callee, arguments: args } }) {
4
      if (callee.type === "Identifier" && callee.name === "require") {
5
        const filePath = getScriptFilePath(
6
          // node_modulesのときはプロジェクトのベースパスではなく、そのモジュールのpathをベースにする
7
          isNodeModule(args[0].value) ? dirname(path) : basePath,
8
          args[0].value,
9
        );
10
        const {
11
          id: moduleID,
12
        } = // ここでrequireの中身のファイルIDを手に入れる
13
          Array.from(modulesMap.values()).find(
14
            ({ path }) => path === filePath,
15
          ) || {};
16

17
        // requireの引数の中身を変更する
18
        args[0].value = moduleID; // './xxxx' => 0 等の数字(moduleID)へ置換する
19
      }
20
    },
21
  });
22
}

最終的な展開式は、各モジュールのidとcodeだけあればいいので、以下のように管理します。 pathはなくてもいいですが、bundle されたファイルにコメントでファイル名書いてあげるとわかりやすいので入れておいたほうがいいです。

1
const modules = new Map();
2

3
modules.set(id, {
4
  path,
5
  code: moduleTemplate(generate(ast).code),
6
});

実行で読み込まれるファイルのすべての依存を解決し、一意なモジュールの id に置換が行えました。

全体コード

1
function convertToModuleId(basePath, modulesMap) {
2
  const modules = new Map();
3

4
  for (const { id, ast, path } of modulesMap.values()) {
5
    traverse(ast, {
6
      CallExpression({ node: { callee, arguments: args } }) {
7
        if (callee.type === "Identifier" && callee.name === "require") {
8
          const filePath = getScriptFilePath(
9
            // don't reset the path when node_modules
10
            // because the path during searching in node_modules is the base path of modulesMap
11
            isNodeModule(args[0].value) ? dirname(path) : basePath,
12
            args[0].value,
13
          );
14
          const { id: moduleId } =
15
            Array.from(modulesMap.values()).find(
16
              ({ path }) => path === filePath,
17
            ) || {};
18

19
          args[0].value = moduleId;
20
        }
21
      },
22
    });
23

24
    modules.set(id, {
25
      path,
26
      code: moduleTemplate(generate(ast).code),
27
    });
28
  }
29

30
  return modules;
31
}

ランタイムのコード作成

最後に二種類の実行コードの作成を行います。

モジュールテンプレート
本体テンプレート(IIFE)

モジュールテンプレート

モジュールは以下のように展開されます。

1
// before
2
function m(txt) {
3
  console.log("module", txt);
4
}
5

6
module.exports = m;

1
// after
2
({
3
  [id]: function (module, exports, require) {
4
    function m(txt) {
5
      console.log("module", txt);
6
    }
7

8
    module.exports = m;
9

10
},
11
});

このように引数のmodule, exports, requireを持った関数に囲います。これは後ほど、本体の引数として使われます。

本体テンプレート

上記で作成したモジュールテンプレートを value として保持し、key をそのモジュールの id としたオブジェクトを IIFE の引数に渡します。

1
((modules) => {
2
  const usedModules = {};
3

4
  function require(moduleId) {
5
    if (usedModules[moduleId]) {
6
      return usedModules[moduleId].exports;
7
    }
8

9
    const module = (usedModules[moduleId] = {
10
      exports: {},
11
    });
12

13
    modules[moduleId](module, module.exports, require);
14

15
    return module.exports;
16
  }
17

18
  return require(0); // この0はエントリーポイントの0
19
})({
20
  // ここからは上のテンプレート
21
  0: function (module, exports, require) {
22
    const m = require(1);
23

24
    m("from entry.js");
25
  },
26
  1: function (module, exports, require) {
27
    function m(txt) {
28
      console.log("module", txt);
29
    }
30

31
    module.exports = m;
32
  },
33
  // ここまで
34
});

これでモジュール解決も行えて、1 ファイルで実行できる形となりました。これが最低限のベースコードとなります。

処理フロー

1 引数に設定しているモジュール群が本体コードに渡りすべての実行が始まる

1
((modules) => {

2 最初に return require(0); が実行される 0(entry point の moduleId)はすでにこのコードを生成する時にセットしておく

1
((modules) => {
2
  ...
3

4
  return require(0);
5
})({...});

3 require(0)を実行する

ここの処理は再帰的に行われるため以下共通

1
const usedModules = {};
2

3
function require(moduleId) {
4
  if (usedModules[moduleId]) {
5
    return usedModules[moduleId].exports;
6
  }
7

8
  const module = (usedModules[moduleId] = {
9
    exports: {},
10
  });
11

12
  modules[moduleId](module, module.exports, require);
13

14
  return module.exports;
15
}

最初にキャッシュ用の変数(usedModules)を確認する(今回は最初なので空)
- キャッシュ変数のキーは moduleID なので、もしあればその中のexportsを返して終わり

--- ここからはキャッシュが無い時の処理 ----

次にキャッシュ変数に今の引数の moduleId の値を入れ初期化(次回以降のキャッシュのため)
- 出口のexportsだけあれば全部のモジュールがつながるのでそれだけ初期化する

1
const module = (usedModules[moduleId] = {
2
  exports: {},
3
});

次に以下の処理を実行する

1
// nodeには、exportsとmodule.exportsがあるため、第1引数と第2引数を使いmodule.exportsに格納する
2
// requireは走査用ラッパー
3
modules[moduleId](module, module.exports, require);

ここで第 3 引数にrequireを渡しているため再帰的に走査を行いキャッシュ変数に使ったモジュールを貯めつつ実行をしていきます

1
({
2
  0: function (module, exports, require) {
3
    // 引数経由で来たIIFE内のrequire functionがここで実行され、1の走査が始まる
4
    // 1の中にrequireがあれば更にそれが呼ばれる を繰り返しコードを組み立てる
5
    // require functionの戻り値はキャッシュ変数に格納されたexports
6
    const m = require(1);
7

8
    m("from entry.js");
9
  },
10
});

このようにエントリーポイントからスタートし、上から順に再帰的にモジュールからモジュールへ呼び出しを行い実行していきます。

bundle されたコード例

1
"use strict";
2

3
const { version } = require("react");
4

5
console.log(version);

これの変換後は以下のようになります。

https://github.com/hiroppy/the-sample-of-module-bundler/blob/master/tests/output/cjs/node-modules/main.min.js

これを見ればわかりますが、tree shaking/dead code elimination の必要性が出てきます。

リポジトリ

すべてのコードはこのリポジトリにあります。

GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler

You will know how to make a javascript bundler. Contribute to hiroppy/the-sample-of-module-bundler development by creating an account on GitHub.

github.com

GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler

さいごに

次回は、tree shaking + ESM について書こうと思います。

module bundlerの作り方(準備編)

webpackの仕組みを簡潔に説明する - hiroppy's site

必要なステップ

モジュール解決

1. 使われるモジュールをすべて列挙し、ユニーク ID を添付させる

ファイル名を取得する

node_modules のファイルを読み込む

使われるモジュールのマップを作成する

filename を id にしない理由

モジュールをキャッシュする

全体コード

2. すべてのコードの`require`を id に置換する

全体コード

ランタイムのコード作成

モジュールテンプレート

本体テンプレート

処理フロー

bundle されたコード例

リポジトリ

GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler

さいごに

前後の記事

module bundlerの作り方(ECMAScript Modules編)

webpack@5で入るModule Federationについて

関連する記事

フロントエンドの最新情報を収集しよう

Webサービスを作るときのテンプレートを作った

module bundlerの作り方(準備編)

webpackの仕組みを簡潔に説明する - hiroppy's site

必要なステップ

モジュール解決

1. 使われるモジュールをすべて列挙し、ユニーク ID を添付させる

ファイル名を取得する

node_modules のファイルを読み込む

使われるモジュールのマップを作成する

filename を id にしない理由

モジュールをキャッシュする

全体コード

2. すべてのコードのrequireを id に置換する

全体コード

ランタイムのコード作成

モジュールテンプレート

本体テンプレート

処理フロー

bundle されたコード例

リポジトリ

GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler

さいごに

前後の記事

module bundlerの作り方(ECMAScript Modules編)

webpack@5で入るModule Federationについて

関連する記事

フロントエンドの最新情報を収集しよう

Webサービスを作るときのテンプレートを作った

2. すべてのコードの`require`を id に置換する