require.context是什么
require.context是webpack的一个api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
分析require.context
require.context函数接受三个参数
-
directory {String} -读取文件的路径
-
useSubdirectories {Boolean} -是否遍历文件的子目录
-
regExp {RegExp} -匹配文件的正则
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
例如:
require.context('./test', false, /.test.js$/);
上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录
如上,会得到test文件下3个文件的执行环境
值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性
-
resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
-
keys {Function} -返回匹配成功模块的名字组成的数组
-
id {String} -执行环境的id,返回的是一个字符串
这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)
简单实现一个前端工程化自动化部署
index.js中的代码:
// 批量处理文件
const requireApi = require.context(
// api 目录的相对路径
'.',
// 是否查询子目录
false,
// 查询文件的后缀
/.js$/
)
let module = {}
requireApi.keys().forEach((key,index)=>{
if(key === './index.js') return
console.log(key);
Object.assign(module,requireApi(key))
})
export default module
list.js中的代码:
import $http from '../http.js'
export const get_label = (data) => {
return $http({
url:'get_label',
data
})
}
http.js中的代码:
export default function $http(options){
const {url,data} = options
return new Promise((reslove,reject)=>{
uniCloud.callFunction({
name:url,
data
}).then(res => {
if(res.result.code === 200){
reslove(res.result)
}else{
reject(res.result)
}
}).catch(err => {
reject(err)
})
})
}
main.js中的代码:
import Vue from 'vue'
import App from './App'
import api from './common/api'
Vue.prototype.$api = api
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
看懂的小伙伴欢迎留言评论~指出改进意见=v=