webpack的require.context()实现路由“去中心化”管理

最近在开发一个大型vue单页面应用的时候，项目最初是将所有的路由写在一个router.js的文件里。

const router = new Router({

　　mode: "history",

　　routes: [{

　　　   path: '/',

　　　　name: 'Index',

　　　　component: include('index', 'home')

　　},

　　{

　　　　path: '/aboutus',

　　　　name: 'aboutUs',

　　　　component: include('aboutUs', 'home')

　　},

　　{

　　　　path: '/feedback',

　　　　component: include('feedback', 'home'),

　　　　redirect: '/feedback/service',

　　　　children: [{

　　　　　　path: '/feedback/service',

　　　　　　component: include('Service', 'home/feedback'),

　　　　},

　　　　{

　　　　　　path: '/feedback/view',

　　　　　　component: include('view', 'home/feedback'),

　　　　}]

　　}]

}

随着业务代码的增长路由很快就会嵌套更深，新增很多路由，这样不利于后续的代码维护。

然而require.context()是什么？

想要实现去中心化管理我们就需要使用到require.context()

然后有了require.context()这个方法，我们就可以通过正则匹配引入相应的文件模块。

require.context(directory, useSubdirectories, regExp)

require.context()有三个参数：

• directory：说明需要检索的目录
• useSubdirectories：是否检索子目录
• regExp: 匹配文件的正则表达式

使用require.context()改造后的allRouters.js文件

示例：

const routes = require.context('@/view', true, /router.js$/)

// （你创建了）一个view文件夹下面（不包含子目录），能被require请求到，所有文件名以 .router.js 结尾的文件形成的上下文（模块）。

 

export default routes.keys().map(key => (routes(key).default || routes(key)))

以后只要业务模块route文件遵循统一的目录结构，业务模块route就能被自动关联到这个allRouters.js里。

然后在route下index.js里引入

import Vue from 'vue'

import Router from 'vue-router'

import allRouters from './allRouters'

Vue.use(Router)

export function createRouter () {

　　const router = new Router({

　　　　'mode': 'history',

　　　　'routes': [

　　　　...allRouters

　　　　]

　　})

}...等等其他操作

这个思路也可应用于其他想要实现"去中心化"管理的功能模块，比如vuex的store模块。