前端开发路由管理和API管理优化

路由管理直接导入

早期开发项目的时候,相信很多人会直接将路由统一写在一个js文件。这种简单粗暴的方式,在应付小项目单页面少的时候没有什么不妥,但到了中大型项目,模块多了,路由多了,问题就暴露出来了,一是模块不清晰,不利于管理,二是多人开发容易代码冲突。

然后,我们就想着,应该按照模块管理路由。这样看起来路由清晰了,但是模块路由需要一个个引入,略繁琐,也可能漏。

require.contex自动化导入

那么,有没有办法自动引入路由模块呢?require.context()可以实现。它是webpack的一个api,通过require.context函数获取一个特定的上下文,主要用来实现自动化导入模块。如果需要从一个文件夹中引入很多模块文件,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使我们不再需要写大量显式的

require.context接受三个参数。

require.context(directory, useSubdirectories, regExp)
  1. directory: 要查找的文件路径
  2. useSubdirectories: 是否查找子目录
  3. regExp: 要匹配文件的正则

在原来的项目基础上,不改动既有的模块引入方式,我们可以结合require.context优化模块引入。

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const value = modulesFiles(modulePath)
  return [...modules, ...value.default]
}, [])
export default modules

API自动化导入

与理由管理的模式类似,api管理也是遵循模块化,同样也可以实现自动化导入。

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const value = modulesFiles(modulePath)
  return Object.assign(modules, value.default)
}, {})
export default {
  ...modules
}

然后愉快的调用api

import http from '@/api/lshAPI' // 引入API

最后,store或者components也可以根据需要使用require.context。

发表回复

您的电子邮箱地址不会被公开。