前端页面 模板开发 （require.context()）

故事：因为最近要开发菜单模板（10多个），多个模板组成一个页面

因为有十多个模板 如果一直使用import会感觉代码很臃肿，所以这里就是用了webpack的一种api require.context()

require.context()

require.context(directory,useSubdirectories,regExp),接收三个参数

1. directory：说明需要检索的目录
2. useSubdirectories：是否检索子目录
3. regExp: 匹配文件的正则表达式,一般是文件名

require.context返回一个require 函数，函数有三个属性：resolve 、keys、id。

1. resolve: 是一个函数，他返回的是被解析模块的id ，接受一个参数request。
2. keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成
3. id：上下文模块的id

代码的实现

首先建个index.js文件

let files = require.context('./components', false, /\.vue$/)  //  这里只匹配如下图components下的.vue文件
  let modules = {}
  files.keys().forEach(key => {
    const moduleName = key.replace(/(\.\/|\.vue)/g, '')
    modules[moduleName] = files(key).default
 }) 
 export default modules```

如图格式
在index.vue加入如下代码

import modules from './index.js';
export default{
data() {
    return {
      routerUrl: '',
      getData: {},
      themeColor: {},
      componentList: [],
      fileModules: [
        {
          tmplName: '首页横幅模板',
          fileName: 'tmpl1',
        },
        {
          tmplName: '横幅模版',
          fileName: 'tmpl2',
        },
        {
          tmplName: '专家信息卡片',
          fileName: 'tmpl3',
        },
        {
          tmplName: '专家信息卡片-中伟专用',
          fileName: 'tmpl3',
        },
        {
          tmplName: '新闻列表模板',
          fileName: 'newsListTmpl',
        },
        {
          tmplName: '静态面板',
          fileName: 'staticPanel',
        },
        {
          tmplName: '通用单图文',
          fileName: 'singleText',
        },
        {
          tmplName: '多图文展示',
          fileName: 'moreGraphic',
        },
      ],
    };
  },
}

因为是后端返回的数据 所以需要做个映射
后端返回格式如下：

打印modules如下：

methods: {
  getTmpl() {
      let arr = []; //定义最终展示那些模块的数组
      let setFileShow = this.getData.tmpGroupVOS; //后端返回数据
      let fileModules = this.fileModules; //映射关系
      for (let i = 0; i < setFileShow.length; i++) {
        for (let j = 0; j < fileModules.length; j++) {
          if (setFileShow[i].tmplName === fileModules[j].tmplName) {
            arr.push({
              file: modules[fileModules[j].fileName], //modules中的value值（vue组件）
              name: fileModules[j].fileName, // name为 modules中的key值（vue组件名称）
              menuTmplJson: JSON.parse(setFileShow[i].menuTmplJson), // 传给子组件的值
              tmpl: setFileShow[i], // 传给子组件的值
              id: setFileShow[i].id, // 传给子组件的值
              dataSourceFullpath: setFileShow[i].dataSourceFullpath // 传给子组件的值
            });
          } else {
          }
        }
      }
      return arr;
    },
}

html代码如下：

<template>
  <div>
    <component
      class="mb"
      v-for="(item, i) in componentList"
      :ref="item.name"
      :key="i"
      :is="item.file"
      :id="item.id"
      :tmpl="item.tmpl"
      :dataSourceFullpath="item.dataSourceFullpath"
      :menuTmplJson="item.menuTmplJson"
    ></component>
  </div>
</template>

其实require.context()还有很多应用场景
例如全局组件的注册 需要注册全局的组件放在一个文件下 用这个api完全可以的

最后希望对迷茫你的有用 一起努力