初识webpack的require.context

require.context

• webpack官方require.context连接
• 参考：使用require.context实现前端工程自动化
• 本文环境: uni-app
• 引入：常规来讲一般，我们封装了接口，如：用户api、商品api、订单api..，每个api模块都需要使用es6模块化规范-import或者node的require()-CommonJS规范。如果有50个模块呢？所以不可能每个都import或require，所以webpack的require.context()方法可以自动导入。

使用

require.context(directory:String, includeSubdirs:Boolean /* 可选的，默认值是 true */, filter:RegExp /* 可选的 */)
参数directory: 检索的目录, 如果是当前目录即 '.'   './'
参数includesSubdirs: 是否迭代子目录
参数filter: 匹配文件的正则表达式  如：/\.js$/ 匹配所有后缀"xx.js"结尾的文件

打印返回值：

• keys {Function} -返回匹配成功模块的名字组成的数组

const requireApi = require.context('./', false, /.js$/);
console.log(requireApi.keys());
输出: ["./index.js", "./label.js"]

• id {String} -执行环境的id,返回的是一个字符串。

const requireApi = require.context('./', false, /.js$/);
console.log(requireApi.id);
输出: ../../../WebProject/uni-app/uniapp-news/utils/api(检索目录) sync(同步方法) .js$(正则表达式)

• resolve {Function} -接受一个参数request,request为检索的文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

const firstFile = requireApi.keys()[0];
console.log(requireApi.resolve(firstFile));
输出:../../../WebProject/uni-app/uniapp-news/utils/api/index.js

项目结构

使用 - 自动导入模块化的接口

• 根据项目结构：

  • http.js：请求的根目录
  • label.js：所有有关label的接口都放在里面
  • index.js：自动化导出

• 关系图：
  

• http.js

/**
 * http: network异步方法
 * 目的: 便于统一维护
 * 参数: 接受Object, 包含name:云函数名(must), data请求参数(not must)
 */
function http ({name, data=null}) {
	return new Promise((resolve, reject) => {
		// console.log('http =>', name, data);
		uniCloud.callFunction({
			name,
			data
		})
		.then(({result: res}) => {
			res.code == 200 ? resolve(res) : reject(res)
		})
		.catch(err => resolve(err));
	})
}

export default http

• label.js

import http from '../http.js';

const label = {
	label_list() { return http({ name: 'get_label-list' }) }
}

export default {
	label
}

• index.js - 自动化导出

/**
 * 通过webpack的自动化工程api自动导出
 */
const requireApi = require.context('./', false, /.js$/); // webpack自动化api

const api = {}; // 挂载Vue实例上的api对象！

// 自动化迭代处理
requireApi.keys().forEach(item => {
	
	// 过滤index.js
	if (item === './index.js') return
	Object.assign(api, requireApi(item).default); // 对象合并
})

export default api;

• main.js 挂载

import Vue from 'vue'
import App from './App'
import api from './utils/api/index.js' 

Vue.config.productionTip = false
Vue.prototype.$api = api // 挂载
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

有问题欢迎大佬们指出 —— 全栈小菜鸡。