Vue使用require.context实现路由、组件、Store自动工程化

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'