uniapp-cross-package-analyzer 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniapp-cross-package-analyzer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "UniApp 跨包依赖分析 Webpack 插件，可视化分析分包之间的依赖关系",
   "main": "src/index.js",
   "keywords": [

package/src/index.js

@@ -124,6 +124,69 @@ class UniAppCrossPackageAnalyzer {
         const nodeMap = new Map();
         const linkSet = new Set();
         
+        // 缓存文件内容用于读取代码行
+        const fileContentCache = {};
+        const getFileLines = (filePath) => {
+            try {
+                const fullPath = path.join(inputPath, filePath);
+                if (!fileContentCache[fullPath]) {
+                    if (fs.existsSync(fullPath)) {
+                        fileContentCache[fullPath] = fs.readFileSync(fullPath, 'utf8').split('\n');
+                    } else {
+                        fileContentCache[fullPath] = null;
+                    }
+                }
+                return fileContentCache[fullPath];
+            } catch (e) {}
+            return null;
+        };
+        
+        const getLineContent = (filePath, lineNum) => {
+            if (typeof lineNum !== 'number' || lineNum < 1) return null;
+            const lines = getFileLines(filePath);
+            if (lines && lines[lineNum - 1] !== undefined) {
+                return lines[lineNum - 1].trim();
+            }
+            return null;
+        };
+        
+        // 在源文件中搜索 import 语句的实际行号
+        const findImportLine = (sourcePath, request, targetPath) => {
+            const lines = getFileLines(sourcePath);
+            if (!lines || !request) return null;
+            
+            // 清理 request，去掉查询参数
+            const cleanRequest = request.replace(/\?.*$/, '');
+            
+            // 从 targetPath 提取更精确的匹配关键词
+            // 例如 /shares/subMain/services/visitCard/index.js -> visitCard/index 或 visitCard
+            const targetParts = targetPath.replace(/^\//, '').split('/');
+            const targetFileName = targetParts[targetParts.length - 1].replace(/\.(js|ts|vue|json)$/, '');
+            const targetDir = targetParts.length >= 2 ? targetParts[targetParts.length - 2] : '';
+            
+            // 构建多个匹配模式，按优先级排序
+            const patterns = [
+                cleanRequest,  // 完整的 request 路径
+                targetDir && targetFileName === 'index' ? targetDir : null,  // 如果是 index.js，用目录名匹配
+                targetDir ? `${targetDir}/${targetFileName}` : null,  // 目录/文件名
+                targetDir ? `${targetDir}/index` : null,  // 目录/index
+            ].filter(Boolean);
+            
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // 必须是 import/require 语句
+                if (!line.includes('import ') && !line.includes('require(')) continue;
+                
+                // 按优先级匹配
+                for (const pattern of patterns) {
+                    if (line.includes(pattern)) {
+                        return { line: i + 1, code: line.trim() };
+                    }
+                }
+            }
+            return null;
+        };
+        
         // 第一遍：收集所有模块
         for (const module of modules) {
             if (!module.resource || !module.resource.includes(inputPath)) continue;
@@ -191,7 +254,19 @@ class UniAppCrossPackageAnalyzer {
                         if (!linkSet.has(linkKey)) {
                             linkSet.add(linkKey);
                             
-                            const location = this.getImportLocation(dep);
+                            // 优先通过搜索源文件找到 import 语句的真实位置
+                            const importInfo = findImportLine(sourcePath, dep.request || dep.userRequest, targetPath);
+                            let location, code;
+                            
+                            if (importInfo) {
+                                location = { line: importInfo.line, column: 0 };
+                                code = importInfo.code;
+                            } else {
+                                // 回退到 dep.loc（可能不准确）
+                                location = this.getImportLocation(dep, module);
+                                code = getLineContent(sourcePath, location.line);
+                            }
+                            
                             const depInfo = {
                                 source: sourcePath,
                                 target: targetPath,
@@ -199,6 +274,7 @@ class UniAppCrossPackageAnalyzer {
                                 targetPackage: targetPackage,
                                 size: targetNode.size,
                                 location: location,
+                                code: code,
                                 request: dep.request || dep.userRequest || targetPath
                             };
                             
@@ -252,8 +328,10 @@ class UniAppCrossPackageAnalyzer {
         return 0;
     }
 
-    getImportLocation(dep) {
+    getImportLocation(dep, sourceModule) {
         let line = '?', column = '?';
+        
+        // 优先从依赖对象本身获取位置（import 语句在源文件中的位置）
         if (dep.loc) {
             if (dep.loc.start) {
                 line = dep.loc.start.line;
@@ -263,6 +341,24 @@ class UniAppCrossPackageAnalyzer {
                 column = dep.loc.column || 0;
             }
         }
+        
+        // 如果 dep.loc 不可用，尝试从源模块的依赖信息中获取
+        if (line === '?' && sourceModule && sourceModule.blocks) {
+            for (const block of sourceModule.blocks) {
+                if (block.dependencies) {
+                    for (const blockDep of block.dependencies) {
+                        if (blockDep === dep && blockDep.loc) {
+                            if (blockDep.loc.start) {
+                                line = blockDep.loc.start.line;
+                                column = blockDep.loc.start.column;
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        
         return { line, column };
     }
 
@@ -280,10 +376,10 @@ class UniAppCrossPackageAnalyzer {
         
         const reportData = this.prepareReportData();
         
+        // 始终导出详细的 JSON 报告（包含每行跨包引用点位）
+        this.exportDetailedJson(reportData, outputPath);
+        
         if (this.analyzerMode === 'json') {
-            const jsonPath = path.join(outputPath, this.statsFilename);
-            fs.writeFileSync(jsonPath, JSON.stringify(reportData, null, 2));
-            console.log(`[UniAppCrossPackageAnalyzer] JSON 报告已生成: ${jsonPath}`);
             return;
         }
         
@@ -299,6 +395,34 @@ class UniAppCrossPackageAnalyzer {
         this.startServer(html);
     }
 
+    exportDetailedJson(reportData, outputPath) {
+        // 简化的跨包引用报告
+        const crossRefs = [];
+
+        // 只保留分包跨分包的调用
+        for (const dep of reportData.crossDeps) {
+            if (dep.sourcePackage === 'main' || dep.targetPackage === 'main') {
+                continue;
+            }
+            
+            crossRefs.push({
+                from: dep.source,
+                to: dep.target,
+                pkg: `${dep.sourcePackage} -> ${dep.targetPackage}`,
+                line: dep.location.line
+            });
+        }
+
+        const result = {
+            total: crossRefs.length,
+            refs: crossRefs
+        };
+
+        const jsonPath = path.join(outputPath, this.statsFilename);
+        fs.writeFileSync(jsonPath, JSON.stringify(result, null, 2));
+        console.log(`[UniAppCrossPackageAnalyzer] JSON 报告已生成: ${jsonPath}`);
+    }
+
     prepareReportData() {
         const crossDepsByPackage = {};
         

package/src/template.js

@@ -162,7 +162,7 @@ module.exports = function generateHTML(data, formatSize) {
             <div class="table-container">
                 <table>
                     <thead>
-                        <tr><th>源文件</th><th>源分包</th><th>目标文件</th><th>目标分包</th><th>体积</th><th>行号</th></tr>
+                        <tr><th>源文件</th><th>源分包</th><th>目标文件</th><th>目标分包</th><th>体积</th><th>行号</th><th>代码</th></tr>
                     </thead>
                     <tbody id="depTableBody"></tbody>
                 </table>
@@ -282,10 +282,14 @@ module.exports = function generateHTML(data, formatSize) {
                         '<span class="file-collapse-icon" style="display: inline-block; width: 16px; font-size: 10px;">▶</span>' +
                         '<span style="color: #aaa; font-size: 12px;">' + file + '</span>' +
                         '<span class="badge" style="background: #667eea;">' + fileDeps.length + '</span></div>' +
-                        '<div id="' + fileCollapseId + '" style="display: none; margin-top: 8px; margin-left: 20px; font-size: 11px; color: #667eea;">';
+                        '<div id="' + fileCollapseId + '" style="display: none; margin-top: 8px; margin-left: 20px; font-size: 11px;">';
                     fileDeps.forEach(dep => {
                         const targetFile = depDirection === 'imports' ? dep.target : dep.source;
-                        html += '<div style="padding: 4px 0;">→ ' + targetFile + ' <span class="size">(' + formatSize(dep.size) + ')</span> L' + dep.location.line + '</div>';
+                        const codeSnippet = dep.code ? ('<div style="background: #0d0d15; padding: 6px 10px; border-radius: 4px; margin-top: 4px; font-family: monospace; color: #e0e0e0; white-space: pre-wrap; word-break: break-all; border-left: 3px solid #667eea;">' + escapeHtml(dep.code) + '</div>') : '';
+                        html += '<div style="padding: 8px 0; border-bottom: 1px dotted #2a2a3e;">' +
+                            '<div style="color: #667eea;">→ ' + targetFile + ' <span class="size">(' + formatSize(dep.size) + ')</span> <span style="color: #888;">L' + dep.location.line + '</span></div>' +
+                            codeSnippet +
+                            '</div>';
                     });
                     html += '</div></div>';
                 });
@@ -417,12 +421,15 @@ module.exports = function generateHTML(data, formatSize) {
             if (filter.search) { const s = filter.search.toLowerCase(); deps = deps.filter(d => d.source.toLowerCase().includes(s) || d.target.toLowerCase().includes(s)); }
             tbody.innerHTML = deps.map(dep => {
                 const isMainS = dep.sourcePackage === 'main', isMainT = dep.targetPackage === 'main';
-                return '<tr><td class="path">' + dep.source + '</td><td><span class="tag ' + (isMainS ? 'main' : '') + '">' + (isMainS ? '主包' : dep.sourcePackage) + '</span></td><td class="path">' + dep.target + '</td><td><span class="tag ' + (isMainT ? 'main' : '') + '">' + (isMainT ? '主包' : dep.targetPackage) + '</span></td><td class="size">' + formatSize(dep.size) + '</td><td>L' + dep.location.line + '</td></tr>';
-            }).join('') || '<tr><td colspan="6" style="text-align: center; color: #666;">无匹配数据</td></tr>';
+                const codeCell = dep.code ? '<code style="background: #0d0d15; padding: 2px 6px; border-radius: 3px; font-size: 11px; color: #e0e0e0;">' + escapeHtml(dep.code) + '</code>' : '-';
+                return '<tr><td class="path">' + dep.source + '</td><td><span class="tag ' + (isMainS ? 'main' : '') + '">' + (isMainS ? '主包' : dep.sourcePackage) + '</span></td><td class="path">' + dep.target + '</td><td><span class="tag ' + (isMainT ? 'main' : '') + '">' + (isMainT ? '主包' : dep.targetPackage) + '</span></td><td class="size">' + formatSize(dep.size) + '</td><td>L' + dep.location.line + '</td><td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;">' + codeCell + '</td></tr>';
+            }).join('') || '<tr><td colspan="7" style="text-align: center; color: #666;">无匹配数据</td></tr>';
         }
         
         function formatSize(bytes) { if (!bytes || bytes === 0) return '0 B'; if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; }
         
+        function escapeHtml(str) { if (!str) return ''; return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;'); }
+        
         document.getElementById('sourceFilter').addEventListener('change', updateFilter);
         document.getElementById('targetFilter').addEventListener('change', updateFilter);
         document.getElementById('searchInput').addEventListener('input', updateFilter);