批量引入模块文件

一、vue 项目

  总结：我们想要的目标数据在 modules 对象中每个属性值中的 default 中。

路由文件

export default {
  path: '/main/system/user',
  component: () => import('@/pages/system/user/user.vue') // 按需引入
}

引入方式

// 全部引入
import * as fooModule from './dir/foo.js'
import * as barModule from './dir/bar.js'

const modules = {
  './dir/foo.js': fooModule,
  './dir/bar.js': barModule
}

1、webpack 中

require.context

// 批量收集本地路由
function loadLocalRoutes() {
  const localRoutes: RouteRecordRaw[] = []

  const modules = require.context('@/router', true, /\.ts$/)

  const keys = modules.keys().filter((key) => key !== './index.ts')

  keys.forEach((key) => {
    const module = modules(key)
    localRoutes.push(module.default)
  })

  return localRoutes
}

2、vite 中

import.meta.glob

// 批量收集本地路由
function loadLocalRoutes() {
  const localRoutes: RouteRecordRaw[] = []

  const modules = import.meta.glob('@/router/**/*.ts', { eager: true })

  const keys = Object.keys(modules).filter((key) => key !== './index.ts')

  keys.forEach((key) => {
    const module = modules[key]
    localRoutes.push(module.default)
  })

  return localRoutes
}

二、koa2 项目

路由文件

const Router = require('@koa/router')

// body数据校验
const { verifyLogin } = require('../middleware/login.middleware.js')

// controller引入
const loginController = require('../controller/login.controller.js')

const userRouter = new Router({
  prefix: '/login'
})

// 用户登录
userRouter.post('/', verifyLogin, loginController.sign)

module.exports = userRouter

引入方式

// 全部引入
const fooModule = require('./dir/foo.js')
const barModule = require('./dir/bar.js')

const modules = {
  './dir/foo.js': fooModule,
  './dir/bar.js': barModule
}

1、获取文件路径

常规方式

const fileArr = []
const getFileName = function (path) {
  readdirSync(path, { withFileTypes: true }).forEach((item) => {
    if (item.isDirectory()) {
      getFileName(`${path}/${item.name}`)
    } else {
      fileArr.push(item.name)
    }
  })
}

// 使用
getFileName(__dirname)
console.log(fileArr)

• 闭包封装

const handle_routes = function (path, app) {
  // const fileArr = []
  const getFileName = function (path) {
    readdirSync(path, { withFileTypes: true }).forEach((item) => {
      if (item.isDirectory()) {
        getFileName(`${path}/${item.name}`)
      } else {
        // fileArr.push(item.name)
        const Router = require(`${path}/${item.name}`)
        app.use(Router.routes(), Router.allowedMethods())
      }
    })
    // return fileArr
  }
  return getFileName(path)
}

// 使用
console.log(handle_routes(__dirname))

2、递归注册路由

// 递归-自动化注册路由
const registerRouter = (app) => {
  const getFileName = function (path) {
    readdirSync(path, { withFileTypes: true }).forEach((item) => {
      if (item.isDirectory()) {
        getFileName(`${path}/${item.name}`)
      } else {
        if (item.name !== 'index.js') {
          const Router = require(`${path}/${item.name}`)
          app.use(Router.routes(), Router.allowedMethods())
        }
      }
    })
  }
  getFileName(__dirname)
}

module.exports = registerRouter