require.context前端工程自动化(Vue)

595 阅读2分钟

使用require.context加快项目的开发速度,实现自动化导入模块,避免每个文件都要import进行导入的烦恼

什么是require.context

  • require.context可以根据正则表达式来对一个目录进行搜索,并且可以配置是否搜索该目录的子目录。

语法:(来自官网)

require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');

require.context可以做什么

  • 全局组件的注册
  • 全局图片的引入
  • ......

使用require.context

require.context接受三个参数

  • directory:代表文件路径
  • useSubdirectories: 是否遍历子目录(Boolean)
  • regExp: 正则表达式

require.context的执行结果返回一个函数,这个函数有三个属性

  • resolve(Function):接受一个文件的相对路径,返回这个文件相对整个项目的相对路径。
  • keys(Function):返回匹配到的模块的数组。
  • id(String):返回require.context的信息

如图:

avatar
avatar
得到的结果为:
avatar
如图所示:requireComponents.keys()得到的是文件的相对路径 但是这样的文件路径是没法直接用的,因为咱们项目利用到的地方都是需要按模块导入的,requireComponents的返回值也是一个函数,档把requireComponents.keys()中的值传入,可以得到如此结果
avatar
由此可见,requireComponents函数的返回值可以返回一个模块,我们可以根据这个做很多文章,比如全局组件的注册,或者全局图片的引入,这样就避免了每个页面写一大堆import这种蛋疼的代码。

全局组件的引入

   requireComponents.keys().forEach(fileName => {
       // 组件实例
       const reqCom = requireComponents(fileName)
       // 截取路径作为组件名
       let reqComName = fileName.split('.vue')[0].split('/')
       reqComName = reqComName[reqComName.length-1]
       // 组件挂载
       Vue.component(reqComName, reqCom.default || reqCom)
   })

然后得到以Base命名且在components文件夹下的文件,都是全局组件

全局图片的使用

```
    let globalImg={};
        // 全局引入图片
        const requireAllImg = require.context(
        '../assets/img',
        true,
        /[\d\D]/
        )
        requireAllImg.keys().forEach(v => {
            const arr = requireAllImg(v).split('/');
            arr.reverse();
            const name = arr[0].split('.')[0]
            globalImg[name]=requireAllImg(v);
        });
    export default globalImg;
    <!-- globalImg是图片对象,然后再main.js中引入 -->
    import glogalImg from './utils/globalImg'
    Vue.prototype.glogalImg = glogalImg;
```

至此,就完成了全局组件和全局图片的注册,大大提升了开发效率,关于require.context的更多妙用,请待后续。。。