從一個例子開始，測試項目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來避免重復