A source code, unclear dependency is the most annoying, let us continue to look, how to implement a small tool, to analyze the dependency relationship, tool github address, feel you can point a star, blog address, like you can also point a star, thank you.

Let’s take a look at the final result:

If selected, the rest is hidden, showing the dependencies it introduces.

How to implement it

Let’s start with the FS and PATH modules of Echart and Node, which are the basis for writing. There are several ways to handle files in FS, several ways to handle paths in PATH, and chord diagrams in Echart, and we’ll sort out the nodes and links dependencies.

The second step is to define some constants, then we need to use the FS module to read filename and pathname of the file in the folder, we also need to determine whether a file is a folder, if it is a folder, we need to recursively call a function, continue reading until everything is iterated. The code is as follows:

  • Define constants
// This file is the constant used by the NPM package

// The folder to ignore
module.exports.IGNORE_DIR = ['node_modules'.'.git'.'dist'.'build'.'test'.'.DS_Store'.'.gitignore'.'package-lock.json'.'README.md'];

// The extension of the file that meets the standard
module.exports.INCLUDE_EXT = ['.js'.'.json'.'.node']
Copy the code
  • Collect the filename and pathname of the file
var fs = require('fs');
var path = require('path');
// Introduce our defined constants
var extName = require('./constant.js').INCLUDE_EXT,
    ignoreFile = require('./constant.js').IGNORE_DIR,
    res = {
        filename: [].pathname: []};function getFileName(dir, addIgnore) {
    var files = fs.readdirSync(dir),
        ignoreList = [];

    // Determine the files that are not needed
    if(Array.prototype.isPrototypeOf(addIgnore)) {
        ignoreList = addIgnore.concat(ignoreFile);
    } else {
        ignoreList = ignoreFile;
    }

    // Collect the file name and path

    files.forEach(function(item) {
        var extname = path.extname(item),
            currentPath = path.join(dir, item),
            isFile = fs.statSync(currentPath).isFile(),
            isDir = fs.statSync(currentPath).isDirectory();
        
        // Search in ignore's list first, and return if found
        if(ignoreList.indexOf(item) ! = =- 1) {
            return;
        } else {
            // Determine if it is the filename we need
            if(isFile && extName.indexOf(extname) ! = =- 1) {
                res.filename.push(item);
                res.pathname.push(currentPath);
            } else if (isDir) {
                // If it is a folder, call the function to continue processinggetFileName(currentPath); }}})return res;
}

Copy the code

You’ll find that the output here can be reorganized enough to serve as a node for Echarts.

For the third step, I prefer to unpack the links, so all we need to do is read each file with FS, and then use the re to unpack the import and require files into the target, so we have to unpack the links. Then I will go directly to the code!!

var fs = require('fs'),
    path = require('path'),
    reqReg = /require\(['|"](.*?) ['|"]\)/g,
    impReg = /import\s.*? [' |] "(. *?) ['|"]/g,
    resDep = [];

function getDepend(res, dir) {
    // Collect dependencies from the pathName array obtained from the previous file res
    res.pathname.forEach(function(item, index) {
        // Read the file
        var data = fs.readFileSync(item, 'utf-8'),
            results = [];
            // matches require
        while((results = reqReg.exec(data)) ! = =null) {
            var link = {
                source: res.pathname[index],
                target: results[1].weight: 1.name: 'dependent'
            };
            resDep.push(link);
        }
        // rematches import
        while((results = impReg.exec(data)) ! = =null) {
            var link = {
                source: res.pathname[index],
                target: results[1].weight: 1.name: 'dependent'}; resDep.push(link); }});return resDep;
}
Copy the code

The fourth step, next time, to run to beg

conclusion

Finally, I would like to recommend some tools and blogs. Welcome star, thank you