使用webpack的require.context实现模块自动化加载

前言

前端脚手架，比如vue-cli中往往需要批量加载一系列的模块，我们除了要准备模块自身之外，还要依次加载，时间长了往往总觉得麻烦，加载列表也是长长的一大串，有什么办法实现自动化加载呢？

require.context是什么

官方文档在此：https://webpack.js.org/guides/dependency-management/#requirecontext

官方文档写的很简单，简单说，require.context就是以当前文件所在目录为语境，根据规则查找模块，然后自动导入。

什么时候用require.context

比如vue-cli项目中，你可能要建一个mixins文件夹，用来存放各种mixin，还会建一个directives文件夹，存放各种自定义指令。

这时候你的文件夹可能有10个文件，那么，如果不用require.context，引入它们怎么做？

在用得到这些mixins的.vue文件里：

import Amixin from '@/mixins/Amixin'
import Bmixin from '@/mixins/Bmixin'
import Cmixin from '@/mixins/Cmixin'
import Dmixin from '@/mixins/Dmixin'
import Emixin from '@/mixins/Emixin'
import Fmixin from '@/mixins/Fmixin'

export default {
  mixins: [Amixin, Bmixin, Cmixin, Dmixin, Emixin, Fmixin]
}

只是import语句就占了6行，这6行其实非常浪费，因为重复的单词太多，全是import、from，再有，看mixins: [Amixin, Bmixin, Cmixin, Dmixin, Emixin, Fmixin]就可以知道你用到了什么mixin，没必要看import，最后，import不是业务逻辑代码，但是却占据了程序员的视野，也是浪费。

这时候，如果使用require.context会怎么写？

怎么用require.context

首先我们在mixins文件夹建一个index.js，内容是：

const requiredMixins = require.context('.', false, /\.js$/); // 获取context
console.log(requiredMixins.keys()); // 返回一个数组类似["./backOrClose.js", "./index.js"]，其中backOrClose是一个mixin模块，index是自己
let mixins = []; // 准备存放模块
requiredMixins.keys().forEach(key => {
  if (key !== './index.js') {
    mixins = mixins.concat(requiredMixins(key).default || requiredMixins(key))
  }
})
console.log(mixins); // mixin的内容就收集起来了。

上述代码并不是最终代码，之后就看你具体怎么用你收集到的模块了。如果全局引用，那么没必要收集，可以这样：

import Vue from "vue";

const requireComponent = require.context('.', false, /\.js$/);

requireComponent.keys().forEach(
    key=>{
        const componentName = key.replace(/^\.\//,"").replace(/\.js$/,"");
        if(componentName !== "index"){
            const component = requireComponent(key);
            Vue.mixin( component.default || component);        
        }
    }
)

如果是组件内引入，那么就在基础代码最后加上：

export default mixins;

.vue文件内用的时候就：

import allMixins from '@/mixins'

export default {
  mixins: allMixins
}

进阶使用require.context

这时候，你再去看网络上关于require.context的教程，就应该很容易看懂了，它的进阶在于参数配置，我就不多说了，可以网上查查。

最后编辑于：2021.02.28 15:08:25