【Webpack】前端工程自动化 - require.context实现模块自动化导入

一、介绍

• require.context 是基于 webpack 的一个的 api，主要用来实现模块的自动化导入
• 在前端工程中，如果遇到一个文件需要引入很多模块的情况，可以使用这个api
• require.context 会遍历文件夹中的指定文件，然后自动导入，这样就不需要每次显式的调用 import 来导入模块了
• 如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助
• 官网地址

二、require.context

• require.context() 函数接收三个参数：

  • directory {String} ：要搜索的目录（读取文件的路径）
  • useSubdirectories {Boolean} ：一个标记，表示是否还搜索其子目录
  • regExp {RegExp} ：匹配文件的正则表达式

• require.context() 函数执行后返回的也是一个函数，该函数有三个属性：

  • resolve {Function} ：接受一个参数 request，request 为 directory {String} 目录下匹配文件的相对路径，返回这个匹配文件相对于 整个工程的 相对路径
  • keys {Function} ：返回匹配成功文件的相对路径所组成的数组
  • id {String} ：context module 的模块 id ，它可能在你使用 module.hot.accept 时会用到

三、vue2批量导入并注册全局组件

1、需求

• 将src/package文件夹下所有的.vue文件都注册为全局组件
  

2、代码

<!--src/package/jzzf/check.vue-->
<template>
  <div>
    <h1>银行初审子组件</h1>
    <button @click="unityAudit">初审</button>
  </div>
</template>

<script>
export default {
  // name必须!!!
  name: "beijingCheck",
  data() {
    return {};
  },
  methods: {
    // 初审
    unityAudit() {
      alert("银行初审方法！！！");
    },
  },
};
</script>

<style></style>

// src/package/index.js
// 批量组件注册
const install = function (Vue) {
    // 读取package文件夹下的文件
    // const reqContext = requeire.context(要搜索的目录, 是否搜索其子目录, 匹配文件的正则表达式)
    const reqContext = require.context('./', true, /\.vue$/)
    // reqContext是一个function函数
    reqContext.keys().forEach((item) => {
        console.log(item);    // item: 文件路径
        console.log(reqContext(item).default)   // 导入的组件
        const com = reqContext(item).default
        // 全局注册组件
        Vue.component(com.name, com)
    })
    console.log(reqContext.id);
    console.log(reqContext.keys());
    // 经过实践发现, resolve函数的request参数的值是keys方法返回的数组的元素
    console.log(reqContext.resolve(reqContext.keys()[0]));
};

export default install; // 这个方法可以被Vue.use调用

• src/package/index.js 输出打印内容如下：
  

// src/main.js
import Vue from 'vue'
import App from './App.vue'
// 注册全局的组件
import comJs from '@/package/index.js'
Vue.use(comJs)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 到这里src/package文件夹下的.vue文件就全部注册为全局组件了，可以直接使用了

// src/App.vue
<template>
  <div id="app">
    <!-- 使用注册好的全局组件 -->
    <beijingCheck/>
    <hr>
    <recheckTransfer/>
    <hr>
    <clearVoucherManage/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style></style>

四、vue2路由模块自动加载

1、需求

• 在 vue 项目中，我们通常会把路由通过不同的功能划分成不同的模块，然后在 index.js 中一个个导入
• 但是如果项目变大、路由特别多的时候，每次手动 import 就会变得很麻烦
• 这时可以使用 require.context() 函数遍历 routes 文件夹的所有文件，一次性导入到 index.js 中，生成路由表
  

2、代码

// src/router/routes/login.js
// 登录模块路由
export default {
  path: '/login',
  component: () => import('@/views/login')
}

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 路由模块自动加载
const moduleFn = require.context('./routes', false, /\.js$/i)
const routes = moduleFn.keys().reduce((prev, curr) => {
  let route = moduleFn(curr).default
  if (Array.isArray(route)) {
    prev.push(...route)
  } else {
    prev.push(route)
  }
  return prev
}, [])

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})