还有点可优化的空间

来源：6-6 Bundler 源码编写（ Dependencies Graph ）

TimYaoo

2019-03-15

在遍历graphArray中判断dependencies是否存在，其实if(dependencies){}有点问题空对象也是true，用Object.getOwnPropertyNames(dependencies).length，或者对象转字符串判断是否等于’{}'要合适一些；
还有就是后面将数组组装成对象，其实放在第一个循环里去处理也是可以的

写回答

4回答

_小_七_

2019-10-02

// 再次优化：加个防止循环引用
const fs = require('fs');
const path = require('path');
const babelParser = require('@babel/parser');
const babelTraverse = require('@babel/traverse').default;
const babel = require('@babel/core');

// 模块依赖分析，传入入口，返回一个数组表示各个模块的相对路径和绝对路径
const moduleAnalyer = fileName => {
    // 拿到源码内容
    const content = fs.readFileSync(fileName, 'utf-8')

    // 生成ast
    const ast = babelParser.parse(content, {
        sourceType: 'module'
    })

    // 分析ast 拿到每个依赖的相对路径和绝对路径
    const dependencies = {}
    babelTraverse(ast, {
        ImportDeclaration({node}) {
            const dirname = path.dirname(fileName)
            const absolutePath = path.resolve('./', dirname, node.source.value) // 绝对路径
            dependencies[node.source.value] = absolutePath
        }
    })

    // 对ast进行转换为es5代码
    const { code } = babel.transformFromAst(ast, null, {
        "presets": [
            "@babel/preset-env"
        ]
    })

    // 返回入口路径、依赖关系、翻译好的es5源码
    return {
        fileName,
        dependencies,
        code
    }
}

const makeModuleGraph = entry => {
    const graph = {}
    const analyer = entry => {
        const {dependencies, code, fileName} = moduleAnalyer(entry)
        graph[fileName] = {
            code,
            dependencies
        }

        if (Object.getOwnPropertyNames(dependencies).length) {
            for(let i in dependencies) {
                // 防止循环引用！
                if (!graph[dependencies[i]]) {
                    analyer(dependencies[i])
                }
            }
        }
    }

    analyer(entry)

    return graph
}

const graph = makeModuleGraph('./src/index.js')
console.log(graph)