自动化导入模块：require.context

在日常引入组件，模块的时候，其实目录格式都差不多，能不能一键引入所有呢？require.context 可以帮助我们实现这个功能。需要 webpack (或在内部使用了 webpack 的 Vue CLI 3+)

传统引入，如果文件有很多，就会很麻烦，而且后期每加一个文件，需要再导入一次

import moduleA from './modules/moduleA.vue'
import moduleB from './modules/moduleB.vue'
import moduleC from './modules/moduleC.vue'


export default {
   
  components: {
   
    moduleA,
    moduleB,
    moduleC
  }
}

接下来文章会介绍利用require.context，实现自动导入模块供能，解放我们的双手。

首先先介绍一下 require.context~

require.context是什么

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

require.context 方法

require.context 函数接受三个参数

• directory{String} - 要搜索的目录

• useSubdirectories {Boolean} - 是否还搜索其子目录

• regExp {RegExp} - 匹配文件的正则表达式

语法如下：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

借用 webpack 官网例子

require.context("./test", false, /\.test\.js$/);
// 遍历当前目录下的test文件夹下的所有以 ‘.test.js’ 结尾的文件，不遍历子目录

require