require.context 使用场景

当你的项目中有一些组件频繁的被使用到，我们把这类组件称之为基础组件。但是又不想每次使用的时候，都要手动的import一次，而且还需要在components选项中声明，这无疑是繁琐的。针对这种场景，就可以使用require.contextapi，对这些基础组件进行全局注册。

require.context参数介绍

第一个参数，需要遍历的文件路径
第二个参数，是否需要遍历子目录
第三个参数，匹配文件名的正则表达式

未使用require.context

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

使用require.context

globalRegisterCom.js

import Vue from 'vue' //引入vue
import {upperFirst,camelCase} from 'lodash'  // 使用lodash库中的 首字母大写，驼峰命名 工具函数，对组件名进行处理

const requireComponent = require.context(
    './components',
    false,
    /Base[A-z]\w+\.(vue|js)$/
)

requireComponent.keys.forEach(fileName => {
        // 获取组件配置(内容)
        const componentConf = requireComponent(fileName)
        
        // 获取组件的 PascalCase 命名
        const componentName = upperFirst(
            camelCase(
                fileName.split('/')
                .pop()
                .replace(/\.\w+$/, '')
            )
        )
        
        // 全局注册组件
        Vue.component(
            componentName,
            // 如果这个组件选项是通过 `export default` 导出的， 
            // 那么就会优先使用 `.default`， 
            // 否则回退到使用模块的根。 
            componentConfig.default || componentConfig
        )
        
})

自动引入路由配置

该api也可以用来自动引入路由配置，使得路由的维护性更友好~

应用场景

当路由配置较多，我们可以将路由配置文件拆分到每个页面的文件夹下，

步骤一

如user模块，该模块下有对应的router.js，内容如下

// src/views/user/router.js

import Layout from '@/layout'

export default {
  path: '/client',
  component: Layout,
  redirect: '/client/list',
  meta: { cache:false },
  children: [
    {
      path: 'list', 
      component: () => import('./'),
      name: 'ClientList',
      meta: { title: 'xxx', keepAlive: false }
    },
    {
      path: 'clientDetail/:id',
      name: 'ClientVirtualEdit',
      component: () => import('./detail'),
      meta: { title: 'xxx' },
      props: true,
      hidden: true
    }
  ]

步骤二

在创建路由时，可以收集到views下面所有模块的router.js文件，进行内容获取，最后拼接到route配置中

// src/router/router.js

import Vue from 'vue'
import Router from 'vue-router'

/**
 * *自动生成并分发路由
 * 收集 views 中的所有路由文件
 */
const routerFiles = require.context('@/views',true,/router\.js$/) 
const routerFilekeys = routerFiles.keys()

const sourceRoutes = routerFileKeys.reduce((routes, file) => routes.concat([routerFiles(file).default]), [])

const createRouter = () => new Router({
  base: '/app/',
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  sourceRoutes
})

const router = createRouter()

export default router

参考

vue官方文档

require.context，解放你的双手，实现自动引入~