深入webpack之JS文件的依赖关系

从一个例子开始，测试项目project里面有三个文件

• project/index.js

import a from './a.js'
import b from './b.js'
console.log(a.value + b.value)

• project/a.js

const a = {
  value: 1,
}
export default a

• project/b.js

const b = {
  value: 2,
}
export default b

依赖关系是 index -> a，b

新建一个deps.ts文件，用来分析我们的project所有依赖，主要代码为以下四行

// 设置根目录
const projectRoot = resolve(__dirname, 'project')
// 类型声明
type DepRelation = { [key: string]: { deps: string[], code: string } }
// 初始化一个空的 depRelation，用于收集依赖
const depRelation: DepRelation = {}

// 将入口文件的绝对路径传入函数
collectCodeAndDeps(resolve(projectRoot, 'index.js'))

console.log(depRelation)
console.log('done')
// node -r ts-node/register deps.ts 运行一下

得到一个对象，它包含了index.js文件的所有依赖

{
    // 对象的key是index.js
    'index.js': {
        // 依赖
        deps: ['a.js', 'b.js'],
        // index.js源代码
        code: 'import a from \'./a.js\'\nimport b from \'./b.js\'\nconsole.log(a.value + b.value)\n'
    }
}

知道deps.ts的功能了，具体分析一下collectCodeAndDeps方法的思路

function collectCodeAndDeps(filepath: string) {
  const key = getProjectPath(filepath) // 文件的项目路径，如 index.js
  // 获取文件内容，将内容放至 depRelation
  const code = readFileSync(filepath).toString()
  // 初始化 depRelation[key]
  depRelation[key] = { deps: [], code: code }
  // 将代码转为 AST，主要是为了看看文件有哪些import语句✅
  const ast = parse(code, { sourceType: 'module' }) 
  // 分析文件依赖，将内容放至 depRelation
  traverse(ast, {
    enter: path => {
      // 如果节点中有import类型声明
      if (path.node.type === 'ImportDeclaration') {
        // path.node.source.value 往往是一个相对路径，如 ./a.js，需要先把它转为一个绝对路径
        const depAbsolutePath = resolve(dirname(filepath), path.node.source.value)
        // 然后转为项目路径
        const depProjectPath = getProjectPath(depAbsolutePath)
        // 把依赖写进 depRelation[index.js]
        depRelation[key].deps.push(depProjectPath)
      }
    }
  })
}

// 获取文件相对于根目录的相对路径
function getProjectPath(path: string) {
  return relative(projectRoot, path).replace(/\\/g, '/')
}

最终的depRelation就收集了index.js的依赖，这样我们使用一个对象，就可以存储文件的依赖

升级 依赖的依赖

比如这样：

index -> a -> dir/a2 -> dir/dir_in_dir/a3
index -> b -> dir/b2 -> dir/dir_in_dir/b3

可以通过不断的调用collectCodeAndDeps方法来收集全部的依赖，其实就是一个递归
那么，刚刚的代码中，只需要变动一处即可实现这个方法

traverse(ast, {
    enter: path => {
      if (path.node.type === 'ImportDeclaration') {
        ...
        // 收集依赖的依赖
        collectCodeAndDeps(depAbsolutePath) // 加上这行✅
        ...
      }
    }
  })

使用递归获取嵌套依赖，从而可以通过一个入口文件获得整个项目的依赖

但是，递归存在 call stack 溢出的风险，比如潜逃层数过多，超过20000？程序直接崩溃

比如：

index -> a -> b
index -> b -> a
...

// a.value = b.value + 1
// b.value = a.value + 1

调用栈溢出，那是因为a -> b -> a -> b -> a -> b -> ... 把调用栈撑满了

怎么解决循环依赖导致调用栈溢出？

需要一些小技巧，比如，一旦发现这个 key 已经在 keys 里了，就 return

function collectCodeAndDeps(filepath: string) {
    ...
    if (Object.keys(depRelation).includes(key)) {
        console.warn(`duplicated dependency: ${key}`)
    return
  }
...

这样分析过程就不是 a -> b -> a -> b -> ... 而是 a -> b -> return

不过，以上循环依赖的例子，是有逻辑漏洞的，因为在实际运行中还是会报错（只是一个例子方便我们进行静态分析），除非给a和b一个初始值

总结

• 使用对象来存储文件依赖关系
• 通过检测key来避免重复