从零实现一个 JS 模块打包器

// src/index.js
import foo from './foo.js';
import { say } from './bar.js';

foo();
say();

// src/foo.js
export default function() {
    console.log('foo: Hello I am foo!');
}

// src/bar.js
export const say = function() {
    console.log('bar.say: Hello I am bar!');
}

const path = require('path');
const { transformFileSync } = require('@babel/core');

/**
 * 读取资源文件，修改 import 语句，ES6 import/export 语法转换成 require/exports 的形式，并生成依赖图
 * @param {string} filePath - 资源文件路径
 */
function createGraph(filePath) {
    if (!path.isAbsolute(filePath)) filePath = path.resolve(__dirname, filePath);
    const dirPath = path.dirname(filePath);

    const dependencies = [];

    const visitor = {
        // 我们要修改的节点是 import 声明节点。
        ImportDeclaration({ node }) {
            // 递归遍历 import 引用的资源文件，将相对路径转换为绝对路径，作为对应模块的 key
            node.source.value = path.resolve(dirPath, node.source.value);
            dependencies.push(createGraph(node.source.value))
        }
    };

    const { code } = transformFileSync(filePath, {
        presets: ['@babel/env'],
        plugins: [
            {
                // babel 提供的访问者模式，详细解释可参考下文
                // https://daweilv.com/2018/07/21/教练我想写一个-helloworld-Babel-插件/
                visitor
            }
        ]
    });

    return {
        filePath,
        code,
        dependencies
    }
}

// src/index.js
"use strict";

var _foo = _interopRequireDefault(require("/Users/david/project/webpack-mini/src/foo.js"));

var _bar = require("/Users/david/project/webpack-mini/src/bar.js");

// 这个方法是为了统一 commonjs 和 es module 的 default 语法
// Modules in Common JS :
// module.exports = function () {};
//
// Modules in ES6 :
// export default function () {}
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

(0, _foo["default"])();

// 这种语法与 Object(_bar.say)() 实现效果相同，使得 _bar.say 作为函数调用
// 而不是作为 _bar 的 say 方法，这与 es6 module 的 export 行为一致
(0, _bar.say)();

// src/foo.js
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

// export default function () {}
// default function 被挂载到了 exports 上
exports["default"] = _default;

function _default() {
    console.log('foo: Hello I am foo!');
}

/**
 * 递归遍历，将依赖图展开成平级的数组
 * @param {object} graph - 依赖图
 * @param {array} modules - 展开后的数组
 */
function flattenGraph(graph, modules) {
    if (!modules) modules = [];
    // 这里将文件的绝对路径作为 module 的id
    modules.push({ id: graph.filePath, code: graph.code })
    if (graph.dependencies.length) {
        graph.dependencies.forEach(o => {
            flattenGraph(o, modules)
        })
    }
    return modules
}

/**
 * 生成入口文件，拼接模块数组
 * @param {array} modules 模块数组
 */
function createBundle(modules) {
    return `(function (modules) {
    function require(moduleId) {
        let exports = {};
        modules[moduleId](exports, require);
        return exports;
    }
    require("${modules[0].id}")
})({${modules.map(module =>
        (`"${module.id}":${generateModuleTemplate(module.code)}`)
    )}})`
}

((function (modules) {
    // 这里的 modules 就是最下面传过来的 kv 对象
    // ...
})(modulesTemplateObject)}

function generateModuleTemplate(code) {
    // 把每个 JS 文件中的代码块包在一个 function 里
    // 将外部的 exports 和 require 传入 function 内
    return `function (exports, require) {
    ${code}
}`
}

function require(moduleId) {
    let exports = {};
    // 这里用 Object 包裹了 module，使得 module 作为值调用
    modules[moduleId](exports, require);
    return exports;
}
// 执行第一个 module，也就是 src/index.js
require("${modules[0].id}")

function webpackMini (fileEntry) {
  const graph = createGraph(fileEntry)
  // console.log(graph);
  const modules = flattenGraph(graph)
  // console.log(modules);
  const bundle = createBundle(modules)
  // console.log(bundle);
  // 生成文件方法就不在此赘述了
  generateFile(bundle)
}

webpackMini('../src/index.js')