如何优雅的引入各种js及模块

首先我们需要了解一下require.context

require.context(directory,useSubdirectories,regExp)

directory 顾名思义就知道是检索的路径

useSubdirectories 是否检索子文件，就是递归子集

regExp 正则表达式，一般是用来检索文件名

到底该怎么用呢

1.在项目当中 如果请求挂载到Vue下

let allapi = {};

let apiContext = require.context('./',false, /\.js$/);
apiContext.keys().forEach(key=> {
	if(key === './index.js') {
		return;
	}
	if(apiContext(key).default) {
		let { methods } = apiContext(key).default;
		if(Object.getOwnPropertyNames(methods).length > 0) {
			Object.getOwnPropertyNames(methods).forEach(it => {
				allapi[it] = methods[it];
			})
		}
	}else {
		Object.keys(apiContext(key)).map(ele => {
			allapi[ele] = apiContext(key)[ele]
		})
	}
})

export default {
	methods: {
		...allapi
	},
}

import {
    get,
    del,
    post
} from '@/utils/ajax';

export function API_del(url, params) {
	return del(url, params)
}

这样就可以将所有的某一个目录下的所有apiJS全部以统一的方式导出到allapi，这样直接在main.js中引入

import appApi from '@/api';

Vue.mixin(appApi);

2. 引入多个vuex store文件

let modulesContext = require.context('./modules',false, /\.js$/);
let modules = {};
modulesContext.keys().forEach(key => {
  let moduleKey = key.replace(/^\.\/(\w+)\.js$/, (rs, $1) => {
    return $1
  });
  modules[moduleKey] = modulesContext(key).default;
})


new Vuex.Store({
    modules,
})

还有很多的作用，就看自己的理解，我项目当中大量的使用，而且全局的插件引用，路由文件的引入，只要有批量引入的地方都是可以使用的

ok！！！