require.context前端自动导入文件方法

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

在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中

require.context

require.context函数接受三个参数

• directory {String} -读取文件的路径
• useSubdirectories {Boolean} -是否遍历文件的子目录
• regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

const requireComponent = require.context('.', false, /\.vue$/)
console.log('requireComponent.keys():',requireComponent.keys())  // 打印
requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName)
    console.log('config:',config)  // 打印
    const componentName = changeStr(
    // ./child1.vue => child1
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   
    )
    // 动态注册该目录下的所有.vue文件
    Vue.component(componentName, config.default || config) 
   
})
// 2 - 将globalComponent.js引入main.js
import global from './components/globalComponent'