使用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的信息
如图:
得到的结果为: 如图所示:requireComponents.keys()
得到的是文件的相对路径
但是这样的文件路径是没法直接用的,因为咱们项目利用到的地方都是需要按模块导入的,requireComponents
的返回值也是一个函数,档把requireComponents.keys()
中的值传入,可以得到如此结果
由此可见,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的更多妙用,请待后续。。。