context
作用
批量导入模块 （主要用来实现自动化导入模块）
语法
const requireContext = require.context( directory: String,includeSubdirs: Boolean ,filter: RegExp ,mode: String)
参数:
- directory : 要查找的文件路径
- includeSubdirs : 是否查找子目录 可选的，默认值是 true
- filter : 要匹配文件的正则 可选的，默认值是 /^./.*$/，所有文件
- mode : 加载方式 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'，默认值是 'sync' */
返回值:
-
requireContext 是一个函数，并且这个函数有3个属性：
-
resolve -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
-
keys -返回匹配成功模块的名字组成的数组
-
id -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载
-
通过 map 直接使用
// 完整写法
// const requireAll = (context) => context.keys().map((key)=>{
// return context(key);
// });
// 简洁写法
const requireAll = (context)=> context.keys().map(context);
const requireContext = require.context(path,boolean,RegExp);
requireAll(requireContext).forEach(item=>{
const module=item.default;
console.log(module);
});
通过 reduce 构造
const requireContext = require.context(path,boolean,RegExp);
const requireAll = (context)=> context.keys().reduce((modules,key)=>{
let name = key.replace(/\.\/(.*)\.js$/,'$1');
let module = requireContext(key);
modules[name] = module.default;
return modules;
},{});
const result = requireAll(requireContext);
console.log(result);
场景
Vue 批量导入 icon
:::details 点击查看代码
const requireContext = require.context('./svg', false, /\.svg/)
const requireAll = context => context.keys().map(context)
requireAll(requireContext)
:::
Vue 批量导入 图片
:::details 点击查看代码
<template>
<div id="app">
<li v-for="(img, index) in images" :key="index">
<p>img: {{img}}</p>
<img :src="imgUrl(img)" alt="">
</li>
</div>
</template>
<script>
const req = require.context('./assets/image', false, /(\.png|\.gif)$/)
export default {
name: 'App',
data () {
return {
images: []
}
},
created () {
this.images = req.keys()
},
methods: {
imgUrl (path) {
return req(path)
}
}
}
</script>
<style>
img {
height: 30px;
}
</style>
:::
Vue 批量导入 Vuex Modules
:::details 点击查看代码
const files = require.context('./modules', false, /\.js$/)
console.log('------------')
console.log(files.keys())
console.log('------------')
const modules = {}
files.keys().forEach(key => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
console.log('------------')
console.log(modules)
console.log('------------')
export default modules
:::