使用require.context实现前端工程自动化

require.context是什么

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

require.context( )语法如下：

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

require.context() 方法来创建自己的（模块）上下文，这个方法有 3 个参数：

•  你要引入文件的目录
•  是否要查找该目录下的子级目录
•  匹配要引入的文件

实例：

// （你创建了）一个test文件夹下面（不包含子目录），能被require请求到，所有文件名以 `.test.js` 结尾的文件形成的上下文（模块）。
require.context("./test", false, /\.test\.js$/);

// （你创建了）一个父级文件夹下面（包含子目录），所有文件名以 `.stories.js` 结尾的文件形成的上下文（模块）。
require.context("../", true, /\.stories\.js$/);

require.context模块导出（返回）一个（require）函数，这个函数可以接收一个参数：request 函数–这里的 request 应该是指在 require() 语句中的表达式

导出的方法有 3 个属性： resolve, keys, id。

• resolve 是一个函数，它返回请求被解析后得到的模块 id。
• keys 也是一个函数，它返回一个数组，该数组是由所有可能被上下文模块解析的请求对象组成
• id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

什么时候需要用到require.context

如果有以下情况,可以考虑使用require.context替换

(1)在Vue写的项目中,我把写路由时候，在index.js中一个个导入,但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历views文件夹中的pages文件夹的所有文件一次性导入到index.js中。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import pageRouter from './routerRegister';

Vue.use(Router);

export default new Router({
  routes: [
    ...pageRouter
  ]
})

routerRegister.js

//自动扫描src/views/pages目录下的文件并注册路由
const pageRouter = [];
const componentsContext = require.context('../views/pages', true, /\.vue$/);
componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component);
  const ctrl = componentConfig.default || componentConfig;
  const routerName = ctrl.name;
  routerName && pageRouter.push({
    path: `/${routerName}`,
    title: routerName,//这里我们可以用对象的key和value来展示汉字
    name: routerName,
    component: () =>
      import (`@/views/pages/${routerName}/${routerName}.vue`)
  });
});
export default pageRouter

 

(2)把一个文件夹照片中的组件挂在到全局，也可以使用。

import Vue from 'vue'

// 自动加载 global 目录下的 .vue 结尾的文件
const componentsContext = require.context('./global', true, /\.vue$/);
componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component);
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  const ctrl = componentConfig.default || componentConfig;
  Vue.component(ctrl.name, ctrl)
});

(3)store中modules中的文件多了也可以使用

。。。。。。