Webpack系列——一个Bundler的编写

Bundler 源码编写

模块分析

在项目 src 文件夹下建立下面三个文件：

word.js

export const word = 'hello';

message.js

import { word } from './word.js';
​
const message = `say ${word}`;
​
export default message;

index.js

import message from './message.js';
​
console.log(message)

在项目根目录下：

bundler.js

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const babel = require('@babel/core');
​
const moduleAnalyser = (filename) => {
    // 读取文件的内容
    const content = fs.readFileSync(filename, 'utff-8');
    // 使用 @babel/parser 分析源代码, 得到抽象语法树
    const ast = parser.parse(content, {
        // 使用 ESM 的代码时需填写 sourceType
        sourceType: 'module'
    });
    const dependencies = {};
    // @babel/traverse 对抽象语法树分析，得到依赖
    traverse(ast, {
        ImportDeclaration({ node }) {
            // 模块所在的路径
            const dirname = path.dirname(filename);
            // 生成模块相对于 bundler.js 所在的路径
            const newFile = './' + path.join(dirname, node.source.value);
            // 以所在路径为key，相对所在路径为值存储
            dependencies[node.source.value] = newFile;
        }
    });
    // 使用 babel 把 ast 翻译成让浏览器可运行的代码
    const { code } = babel.transformFromAst(ast, null, {
        // 把 ES6 的代码转换成 ES5的代码
        presets: ["@babel/preset-env"]
    });
    // 返回分析的内容：文件名，依赖，翻译的代码
    return {
        filename,
        dependencies,
        code
    }
}
​
const moduleInfo = moduleAnslyser('./src/index.js');
console.log(moduleInfo);

DenpendenciesGraph

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse');
const babel = require('@babel/core');
​
// 模块分析
const moduleAnalyser = (filename) => {
    const content = fs.readFileAsync(filename, 'utf-8');
    const ast = parser.parse(content, {
        sourceType: 'module'
    });
    const dependencies = {};
    traverse(ast, {
        ImportDeclaration({ node }) {
            const dirname = path.dirname(filename);
            const newFile = './' + path.join(dirname, node.source.value);
            dependencies[node.source.value] = newFile;
        }
    });
    const { code } = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    });
    return {
        filename,
        dependencies,
        code
    }
}
​
// DependenciesGraph
const makeDependenciesGraph = (entry) => {
    const entryModule = moduleAnalyser(entry);
    const graphArray = [ entryModule ];
    // 队列循环实现递归效果
    for (let i = 0; i < graphArray.length; i++) {
        const item = graphArray[i];
        const { dependencies } = item;
        if(dependencies) {
            for(let j in dependencies) {
                graphArray.push(
                    moduleAnalyser(dependencies[j])
                );
            }
        }
    }
    const graph = {};
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    });
    return graph;
}
​
const graphInfo = makeDependenciesGraph('./src/index.js');
console.log(graphInfo)

生成代码

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const babel = require('@babel/core');
​
// 模块分析
const moduleAnalyser = (filename) => {
    const content = fs.readFileAsync(filename, 'utf-8');
    const ast = parser.parse(content, {
        sourceType: 'module'
    });
    const dependencies = {};
    traverse(ast, {
        ImportsDeclaration({ node }) {
            const dirname = path.dirname(filename);
            const newFile = './' + path.join(dirname, node.source.value);
            dependencies[node.source.value] = newFile;
        }
    });
    const { code } = babel.tranformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    });
    return {
        filename,
        dependencies,
        code
    }
}
​
// 生成 DependenciesGraph
const makeDependenciesGraph = (entry) => {
    const entryModule = moduleAnalyser(entry);
    const graphArray = [ entryModule ];
    for (let i = 0; i < graphArray.length; i++) {
        const item = graphArray[i];
        const { dependencies } = item;
        if(dependencies) {
            for(let j in dependencies) {
                graphArray.push(
                    moduleAnalyser(dependencies[j])
                )
            }
        }
    }
    const graph = {};
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    });
    return graph;
}
​
// 生成代码
const generateCode = (entry) => {
    const graph = JSON.stringify(makeDependenciesGraph(entry));
    return `
        (function(graph) {
            function require(module) {
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code) {
                    eval(code)
                })(localRequire, exports, graph[module].code)
                return exports;
            };
            require('${entry}');
        })(${graph});
    `;
}
​
const code = generateCode('./src/index.js');
console.log(code);

​