前言

书接上回：这个夏天，给你的代码减个肥 🍉｜let-s-refactor 插件开发之路（一）

在我上次给我的代码完成减肥之后，我有了一个新的想法：

💡：我既然已经具有了识别 export 与 import 的能力，为何不将项目内部完整的依赖关系可视化展现，以便发现项目结构中的不合理导入导出。

于是本周末我就开始引入 let-s-refactor 插件的第四个能力：可视化前端项目内部依赖。

⚠️：本插件暂时仅支持本公司框架下的项目，本文后续内容为设计与开发思路，以供各位参考。

设计思路

网络异常，图片无法展示

最初我打算把项目的完整引用全部展示，但是项目可能存在很多根节点：

src/views/pages/...
src/expose/...
src/main.js
...

于是存在两个问题：

根节点过多导致图的展示混乱
当我要查看某个组件的依赖路径的时候，其实并不关心其他引用分支上的导入导出关系

所以我做了如下设计：

网络异常，图片无法展示

先选择左侧的根文件，之后在右侧的区域展示该根文件的引用关系。

之后，还需要根据文件或者内容定义的不同做区分：

root：根文件
vueComponent：vue 组件
constant：常量
config：配置信息
service：api
util：工具方法
other：其他信息

网络异常，图片无法展示

当然，就算我们只在视窗显示一个根文件下的引用关系，也有可能极为复杂，于是，我有个想法：

💡：动态的根据每个节点（文件）的类型（vue组件/常量/api...）去计算每个节点的位置

于是我就会去思考，我们项目中的业务文件就类型区分，基本可以分为：

.vue 文件
.js 文件

而在我们常见的项目中：js 文件相对于 vue 文件基本处于引用关系的下游，即基本上为 vue 文件引用 js 文件，鲜有 js 引用 vue 文件的情况。

于是在我的设计中引用树自上而下的顺序为：

root 根节点
vueComponent 节点
js（config/util/...）节点
...

即：

网络异常，图片无法展示

最终效果

网络异常，图片无法展示

当然依然可能存在数据量巨大的情况，我做了鼠标悬停的效果：

网络异常，图片无法展示

技术实现

网络异常，图片无法展示

上面我们已经看完了我对这个功能的设计，下面请各位跟随我的视角一起把这个功能实现出来。

获取业务根文件

入口：

const viewProjectArchitecture = vscode.commands.registerCommand('let-s-refactor.viewProjectArchitecture', () => {
    const businessRootFileList = getBusinessRootFileList();
    ArchitectureViewProvider.initTreeView(businessRootFileList);
});

getBusinessRootFileList 方法：

就是提取 pages，expose，main.js 文件列表

const getBusinessRootFileList = () => {
    const projectRoot = getProjectRoot();
    if (!projectRoot) return [];
    const fileList = [];
    const pagePath = path.join(projectRoot, '/views/pages');
    if (fs.existsSync(pagePath)) {
        fileList.push(...getFileList(pagePath));
    }
    const exposePath = path.join(projectRoot, '/expose');
    if (fs.existsSync(exposePath)) {
        fileList.push(...getFileList(exposePath));
    }
    const mainPath = path.join(projectRoot, '/main.js');
    if (fs.existsSync(mainPath)) {
        fileList.push(mainPath);
    }
    return fileList;
}

getBusinessRootFileList 方法使用了 getFileList 方法：

一个小递归，入参是目录路径

const getFileList = (dirPath) => {
    let dirSubItems = fs.readdirSync(dirPath);
    const fileList = [];
    for (const item of dirSubItems) {
        const childPath = path.join(dirPath, item);
        if (_isDir(childPath) && !excludedDirs.has(item)) {
            fileList.push(...getFileList(childPath));
        } else if (!_isDir(childPath) && includedFileSubfixes.has(path.extname(item))) {
            fileList.push(childPath);
        }
    }
    return fileList;
}

获取根节点引用的所有后代节点

获取到的节点就是所有展示在引用树上的所有节点～后续我们也需要读取这些文件内容拿到引用的 source 和 target

入口：

const importedFileList = [...getImportedFileSet([path])];

getImportedFileSet 方法：

此方法在这个夏天，给你的代码减个肥 🍉｜let-s-refactor 插件开发之路（一）中有介绍，主要是使用正则拿到所有引用路径的

const getImportPathRegs = () => {
    // TODO: 无法检测运行时生成的路径
    return [
        // import * from './example'
        /(?<statement>import\s+.*?\s+from\s+['"](?<modulePath>.+?)['"])/g,
        // import('./example')
        /(?<statement>import\(['"](?<modulePath>.+?)['"]\))/g,
        // import './example'
        /(?<statement>import\s+['"](?<modulePath>.+?)['"])/g
    ]
}
const getImportedFileSet = (fileList, set = new Set([])) => {
    const _fileList = [];
    for (const file of fileList) {
        if (set.has(file)) {
            continue;
        }
        set.add(file);
        const content = fs.readFileSync(file, {
            encoding: 'utf-8'
        });
        const regReferences = getImportPathRegs();
        for (const reg of regReferences) {
            let matchResult;
            while ((matchResult = reg.exec(content))) {
                const { modulePath } = matchResult.groups;
                const filePath = speculatePath(modulePath, file);
                if (filePath && !set.has(filePath)) {
                    _fileList.push(filePath);
                }
            }
        }
    }
    if (_fileList.length) getImportedFileSet(_fileList, set);
    return set;
}

获取内部引用关系

既然我们已经拿到了全部的文件信息，那么我们就可以读取他们，拿到引用的 source 和 target 了～

入口：

const { links, fileValueMap } = getRelationshipMapLinkInfo(importedFileList);

getRelationshipMapLinkInfo 方法：

这里我们的目标是拿到引用的 source 和 target，以及引用的数量

const getRelationshipMapLinkInfo = (fileList) => {
    const links = [];
    const fileValueMap = new Map();
    for (const targetFile of fileList) {
        const content = fs.readFileSync(targetFile, {
            encoding: 'utf-8'
        });
        const regReferences = getImportPathRegs();
        let value = 0;
        for (const reg of regReferences) {
            let matchResult;
            while ((matchResult = reg.exec(content))) {
                const { modulePath } = matchResult.groups;
                const sourceFile = speculatePath(modulePath, targetFile);
                if(!sourceFile) continue;
                value ++;
                links.push({
                    source: sourceFile,
                    target: targetFile,
                })
            }
        }
        fileValueMap.set(targetFile, value);
    }
    return { links, fileValueMap };
}

获取关系图节点信息

此处我们使用的是 echarts 进行图表渲染，再加上前文设计思路中所说的，我要动态计算节点的位置，于是诞生了这个方法

入口：

const nodes = getRelationshipMapNodes(importedFileList, path);

getRelationshipMapNodes 方法：

此处注意，我为图表左侧和顶部预留了 50px 宽度，以及每个节点都在我设计的 160 * 100 四边形中的随机一点

const getRelationshipMapNodes = (fileList, rootBusinessPath) => {
    const rootPath = getProjectRoot();
    const bufferLeft = 50;
    const bufferTop = 50;
    let rootFile = '';
    const componentFileList = [];
    const noncomponentFileList = [];
    fileList.forEach(file => {
        if (file == rootBusinessPath) {
            rootFile = file;
        } else if (path.extname(file) === '.vue') {
            componentFileList.push(file);
        } else {
            let category = 'Other';
            if (file.startsWith(`${rootPath}/constant`)) {
                category = 'Constant';
            } else if(file.startsWith(`${rootPath}/config`)) {
                category = 'Config';
            } else if(file.startsWith(`${rootPath}/service`)) {
                category = 'Service';
            } else if(file.startsWith(`${rootPath}/util`)) {
                category = 'Util';
            }
            noncomponentFileList.push({
                file,
                category
            })
        }
    });
    const nodes = [];
    if(!rootFile) return nodes;
    const columnCount = 10;
    const columnWidth = 1000 / columnCount;
    const rowHeight = 160;
    const getRandomPosition = (row, column) => {
        return {
            x: bufferLeft + (column + 0.3 + 0.4 * Math.random()) * columnWidth,
            y: bufferTop + (row + + 0.2 + 0.6 * Math.random()) * rowHeight
        }
    } 
    let maxColumn = 0;
    let row = 1;
    let column = 0;
    for(const file of componentFileList) {
        nodes.push({
            id: file,
            name: file.replace(rootPath, ''),
            path: file,
            category: 'VueComponent',
            ...getRandomPosition(row, column)
        })
        if(column == columnCount - 1) row ++; 
        maxColumn = Math.max(column, maxColumn);
        column = (column + 1) % columnCount
    };
    if(column != 0) row ++;
    column = 0;
    for(const fileInfo of noncomponentFileList) {
        nodes.push({
            id: fileInfo.file,
            name: fileInfo.file.replace(rootPath, ''),
            path: fileInfo.file,
            category: fileInfo.category,
            ...getRandomPosition(row, column)
        })
        if(column == columnCount - 1) row ++; 
        maxColumn = Math.max(column, maxColumn);
        column = (column + 1) % columnCount
    };
    nodes.push({
        id: rootFile,
        name: rootFile.replace(rootPath, ''),
        path: rootFile,
        category: 'Root',
        x: bufferLeft + maxColumn * columnWidth / 2,
        y: bufferTop + rowHeight / 2 
    });
    return nodes;
}

随后我们就可以根据返回的节点去渲染 echarts 的关系图了～

结束语

网络异常，图片无法展示

那么，这篇文章的全部内容就到此结束了。接下来打算先用语法分析优化 export 与 import 分析准确性，以及增加本插件的普遍适用性。

各位年薪百万的读者，我们下次再见！

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

流波将月去，潮水带星来。

杨广《春江花月夜》

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

你根本不知道“她“的全貌，「可视化」前端项目内部依赖 🍉

前言

设计思路

最终效果

技术实现

获取业务根文件

获取根节点引用的所有后代节点

获取内部引用关系

获取关系图节点信息

结束语

热门文章

最新文章

相关课程

相关电子书

相关实验场景