实现一个简易版 Webpack parseDependencies

parseDependencies 是一个用于解析模块依赖关系的函数。在 Webpack 的打包过程中，解析依赖关系是一个关键步骤。这个函数的作用是从模块的源代码中提取出所有的依赖模块，以便递归地构建整个依赖图。

在实际的 Webpack 源码中，解析依赖关系的过程要复杂得多，涉及到对不同模块类型（如 JavaScript、CSS、图片等）的处理。为了简化说明，我们可以实现一个基本的 parseDependencies 函数来解析 JavaScript 模块的依赖关系。

实现一个简单的 parseDependencies 函数

我们可以使用正则表达式来提取 import 或 require 语句中的依赖模块。以下是一个简单的实现：

const fs = require('fs');
const path = require('path');

function parseDependencies(content) {
    const dependencies = [];
    const importRegex = /import\s+.*\s+from\s+['"]([^'"]+)['"]/g;
    const requireRegex = /require\(['"]([^'"]+)['"]\)/g;

    let match;
    while ((match = importRegex.exec(content)) !== null) {
        dependencies.push(match[1]);
    }
    while ((match = requireRegex.exec(content)) !== null) {
        dependencies.push(match[1]);
    }

    return dependencies;
}

// 示例用法
const content = fs.readFileSync('./src/index.js', 'utf-8');
const dependencies = parseDependencies(content);
console.log(dependencies);

解释

1. 正则表达式：

   • importRegex 用于匹配 ES6 的 import 语句。
   • requireRegex 用于匹配 CommonJS 的 require 语句。

2. 解析过程：

   • 使用 importRegex 和 requireRegex 分别匹配 import 和 require 语句。
   • 将匹配到的依赖模块路径添加到 dependencies 数组中。

3. 示例用法：

   • 读取 index.js 文件的内容。
   • 调用 parseDependencies 函数解析依赖关系，并输出结果。

完整示例

结合前面的内容，我们可以将 parseDependencies 函数集成到整个打包流程中：

const fs = require('fs');
const path = require('path');
const babel = require('@babel/core');

function parseDependencies(content) {
    const dependencies = [];
    const importRegex = /import\s+.*\s+from\s+['"]([^'"]+)['"]/g;
    const requireRegex = /require\(['"]([^'"]+)['"]\)/g;

    let match;
    while ((match = importRegex.exec(content)) !== null) {
        dependencies.push(match[1]);
    }
    while ((match = requireRegex.exec(content)) !== null) {
        dependencies.push(match[1]);
    }

    return dependencies;
}

function transform(content) {
    return babel.transform(content, {
        presets: ['@babel/preset-env']
    }).code;
}

const entry = './src/index.js';
const modules = [];

function buildModule(filename) {
    const content = fs.readFileSync(filename, 'utf-8');
    const transformedContent = transform(content);
    const dependencies = parseDependencies(transformedContent);
    modules.push({ filename, content: transformedContent, dependencies });

    dependencies.forEach(dep => {
        const depPath = path.resolve(path.dirname(filename), dep);
        buildModule(depPath);
    });
}

buildModule(entry);

const bundle = modules.map(module => {
    return `
        // ${module.filename}
        function(module, exports, require) {
            ${module.content}
        }
    `;
}).join(',');

const result = `
    (function(modules) {
        function require(filename) {
            const fn = modules[filename];
            const module = { exports: {} };
            fn(module, module.exports, require);
            return module.exports;
        }
        require('${entry}');
    })({${bundle}})
`;

fs.writeFileSync('./dist/bundle.js', result);