检查路由名与页面名是否一致

发表于 更新于 分类于 阅读次数：

在使用 keep-alive 做页面缓存时，要求路由名与页面名保持一致，我们可以通过 nodejs 来检查路由名和组件是否一致

脚本代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const fs = require('fs')
const path = require('path')

const paths = {}

function getStat(dir, resolve, reject) {
  fs.stat(path.resolve(dir), (eror, stats) => {
    if (eror) {
      // 防止死循环
      if (dir.split('.vue').length > 2) return

      typeof reject === 'function' && reject()
      return
    }
    typeof resolve === 'function' && resolve(stats.isFile(), stats.isDirectory())
  })
}

// 检测路由名与组件名是否一致
function checkName(dir, routeName) {
  getStat(
    dir,
    (isFile, isDir) => {
      if (isFile) {
        const content = fs.readFileSync(path.resolve(dir), 'utf-8')

        content.replace(/export default {.*\W*.*name: ['"](.+)['"].*/m, (str, $1) => {
          if ($1 !== routeName) {
            console.warn(`${dir} 路由名 ${routeName} 与组件名 ${$1} 不一致`)
          }

          // 直接替换为空字符串，避免重复匹配
          return ''
        })
      } else if (isDir) {
        checkName(dir + '/index.vue', routeName)
      }
    },
    () => {
      checkName(dir + '.vue', routeName)
    }
  )
}

function getRouteNameInReplace($1, $2, paths) {
  if (!$1 || !$2) return
  if (paths[$1]) {
    console.error(`存在同名路由: ${$1}, ${paths[$1]}, ${$2}`)
  } else {
    const dir = $2.replace('@', './src')
    paths[$1] = dir
    checkName(dir, $1)
  }
}

// 文件遍历方法
function fileDisplay(filePath) {
  // 根据文件路径读取文件，返回文件列表
  fs.readdir(filePath, (err, files) => {
    if (err) {
      console.warn(err)
    } else {
      // 遍历读取到的文件列表
      files.forEach(filename => {
        // 获取当前文件的绝对路径
        const filedir = path.join(filePath, filename)
        // 根据文件路径获取文件信息，返回一个fs.Stats对象
        getStat(filedir, (isFile, isDir) => {
          if (isFile) {
            // 读取文件内容
            const content = fs.readFileSync(filedir, 'utf-8')

            content
              // 路由表中 name 在 component 前面
              .replace(/name: ['"](.+)['"].*\W*.*component:.*\W*.*import\(.*\W*.*['"](.+)['"].*\W*.*\)/gm, (str, $1, $2) => {
                getRouteNameInReplace($1, $2, paths)

                // 直接替换为空字符串，避免重复匹配
                return ''
              })
              // 路由表中 name 在 component 后面
              .replace(/component:.*\W*.*import\(.*\W*.*['"](.+)['"].*\W*.*\).*\W*.*name: ['"](.+)['"]/gm, (str, $1, $2) => {
                getRouteNameInReplace($2, $1, paths)

                // 直接替换为空字符串，避免重复匹配
                return ''
              })
          } else if (isDir) {
            // 递归，如果是文件夹，就继续遍历该文件夹下面的文件
            fileDisplay(filedir)
          }
        })
      })
    }
  })
}

// 调用文件遍历方法
fileDisplay(path.resolve('./src/router'))

用法

将上述脚本保存在项目目录中，比如 /routeNameChecker.js，直接执行 node ./routeNameChecker.js 即可，若存在不同会直接打印在终端

也可以在 package.js 中加一条 script "check": "node .\\routeNameChecker.js", 就可以直接执行 npm run check