fs 自动生成路由文件

1. 使用node.js中的fs模块读写文件信息之后设置数据 然后写入指定文件内
2. 注意:node必须在客户端执行 不能再自定义webpack插件 在webpack中执行插件
3. 代码实现

const fs = require('fs')
const prettier = require('prettier')
const path = require('path')
const directoryPath = path.join(__dirname, '../src/views'); // 替换为你的目录名


// 文件名称
const getPathName = (test) => {

  const str = test.split("\\").join("/")
  const importNameStr = str.split("/").join("");
  return importNameStr

}

// 美化代码
const genRouteConfigScript = (routes, requireComponent) => {

  let text = ''
  requireComponent.forEach(script => {
    text += `${script};\n`
  })

  text += `\n`
  text += `export default ${JSON.stringify(routes)}`
  return prettier.format(text, { singleQuote: true, semi: false, parser: 'babel' })

}


// 递归读取文件夹和文件
const readDirRecursive = (dir, result = { dir: [], files: [], }) => {
  try {

    const files = fs.readdirSync(dir, { withFileTypes: true })
    files.forEach((file) => {

      // 判断是否是目录
      if (file.isDirectory()) {

        const subDir = path.join(dir, file.name)
        result.dir.push(subDir)
        readDirRecursive(subDir, result)

      } else {

        const filePath = path.join(dir, file.name)
        result.files.push(filePath)

      }
    })

  } catch (err) {

    console.error(`Failed to read directory ${dir}: ${err.message}`)

  }

  return result
}



const routerConfig = async () => {
  const result = await readDirRecursive(directoryPath)
  let requireComponent = []
  let routerList = []

  let routerFile = result.dir[0]
  routerFile = routerFile.substring(2, routerFile.indexOf('views'))
  routerFile = routerFile.split("\\").join("/")
  result.files.forEach((item, i) => {

    const str = getPathName(item)
    const pathStr = str.substring(str.indexOf('views') + 5, 1000) // import名称   views/AboutView.vueviews/HomeView.vue
    const importNameStr = str.substring(str.indexOf('views') + 5, str.length - 4) // import名称     AboutView
    const importNames = importNameStr.split("/").join("");  // import名称
    const im = 'import ' + importNames + ' from "@/views/' + pathStr + '"'
    requireComponent.push(im)
    routerList.push({
      path: pathStr,
      name: importNames,
      component: `## ${importNames} ##`,
    })
  })
  const script = genRouteConfigScript(routerList, requireComponent)
  let a = script.replace(/"##/g, '').replace(/##"/g, '').replace(/'##/g, "").replace(/##'/g, "")

  fs.writeFile(`${routerFile}router/routes.js`, a, (err) => {
    if (err) {
      console.error(err);
      console.log('文件写入失败：', err);
    }
    console.log('文件写入成功');
  });


}
class learnRouterWebpackPlugin {
  constructor() {
  };
  apply(compiler) {
    compiler.hooks.environment.tap('RouterWebpackPlugin', () => {
      routerConfig()

    })
  }
}

module.exports = learnRouterWebpackPlugin