使用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的教程,就应该很容易看懂了,它的进阶在于参数配置,我就不多说了,可以网上查查。