require.context
是webpack编译器支持的一项特殊功能,允许你从某个目录开始获取所有匹配的模块。
// 它有三个参数 1.要检索的目录 2.是否检索子目录 3.匹配文件的正则表达式
const requireModules = require.context('./test', false, /\.js/)
// 上述创建一个context,其中文件来自 test 目录,匹配以 js 结尾的文件
一个 context module 会导出一个(require)函数
此导出函数有三个属性:resolve
,keys
,id
,我们这里主要用到keys
,可以通过它来找出上下文的内容。
在控制台打印结果:
接着通过导出的函数来调用keys
,发现获取到了context
内容
下面来看下各实现方式
路由
// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const requireRoutes = require.context('./modules', true, /\.js/)
const routes = []
requireRoutes.keys().forEach(routePath => {
routes.push(...requireRoutes(routePath).default)
})
const router = new VueRouter({
routes
})
export default router
// home.js 示例
export default [
{
path: '/home',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
}, {
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
}
]
store
// index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const requireStores = require.context('./modules', true, /\.js/)
let modules = []
requireStores.keys().forEach(modulePath => {
// 模块名
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
modules[moduleName] = (requireStores(modulePath).default)
})
export default new Vuex.Store({
modules
})
// menu.js 示例
export default {
state: {
list: []
},
mutations: {
SET_LIST (state, list) {
state.list = list
}
},
actions: {
setList ({ commit }, list) {
commit('SET_LIST', list)
}
},
getters: {
list (state) {
return state.list
}
}
}
组件
// common.js
import Vue from 'vue'
const requireComponents = require.context('./', true, /\.vue/)
requireComponents.keys().forEach(cptPath => {
// 组件名
const cptName = cptPath.replace(/^\.\/(.*)\.\w+$/, '$1')
// 注册组件
Vue.component(cptName, requireComponents(cptPath).default)
})
// 在 main.js 里导入
import '@/components/common/common.js'