require.context 简介

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

/*
    1. directory {String} -读取文件的路径
    2. useSubdirectories {Boolean} -是否遍历文件的子目录
    3. regExp {RegExp} -匹配文件的正则
*/
require.context(directory, (useSubdirectories = false), (regExp = /^./));

require.context 自动配置路由

// 导入pages目录下的vue文件
const requireComponent = require.context(
    //  其组件目录的相对路径
    '@/pages/',
    //  是否查询其子目录
    true,
    //  匹配基础组件文件名的正则表达式, 这里可以匹配的文件名为xxx.vue格式
    /.(vue)$/
);

//  获取组件的路径
const ZF_PAGES = [];
requireComponent.keys().forEach(fileName => {
    //  剥去文件名开头的 `'./` 和结尾的扩展名
    ZF_PAGES.push(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'));
});

//  驼峰转下划线(根据需求自定义)
function humpToLine(name) {
    let _name = name.replace(name[0], name[0].toLowerCase());

    return _name.replace(/([A-Z])/g, '_$1').toLowerCase();
}

// 生成路由表
const routes = ZF_PAGES.map(page => {
    let pluginPage = page;
    let lineFileName = humpToLine(pluginPage);
    let _path = `/${lineFileName}`;

    routerTxt += _path + '\r\n';

    routes.push({
        path: _path,
        name: page,
        component: resolve => require([`@/pages/${page}.vue`], resolve),
        meta: {
            currentMenu: page
        }
    });
});

注：动态路由可参考Nuxt.js 里面定义带参数的动态路由，创建对应的以下划线作为前缀的 Vue 文件 或 目录

require.context 自动全局导入组件

let globalComponentsRegister = () => {
    // 全局导入组件
    const requireComponent = require.context(
        // 其组件目录的相对路径
        '../public/customerComponents',
        // 是否查询其子目录
        true,
        // 匹配基础组件文件名的正则表达式, 这里可以匹配的文件名为CustomerXxxx.vue格式
        /Customer[A-Z]\w+\.(vue|js)$/
    );
    console.log(requireComponent.keys());

    requireComponent.keys().forEach(fileUrl => {
        // 获取组件配置
        const componentConfig = requireComponent(fileUrl);
        const fileName = fileUrl.split('/').pop();
        const componentName = fileName.split('.').shift();

        // 全局注册组件
        Vue.component(
            componentName,
            // 如果这个组件选项是通过 `export default` 导出的，
            // 那么就会优先使用 `.default`，否则回退到使用模块的根。
            componentConfig.default || componentConfig
        );
    });
};

globalComponentsRegister();

require.context 自动全局导入方法

let globalFunctionRegister = () => {
    // 全局导入方法
    Vue.$customerFns = {};
    const requireComponent = require.context(
	'../public/customerJs',
	true,
	/Customer[A-Z]\w+\.(vue|js)$/
    );

    console.log(requireComponent.keys());
    requireComponent.keys().forEach(fileUrl => {
        const componentConfig = requireComponent(fileUrl);
        const fileName = fileUrl.split('/').pop();
        const fnName = fileName.split('.').shift();

        Vue.$customerFns[fnName] = componentConfig.default || componentConfig;
    });
};

globalFunctionRegister();

require.context 自动导入vuex moudules

import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  modules,
  getters
})

博客原文http://www.globm.top/blog/1/detail/50