require.context
主要使用require.context实现前端工程化动他引入文件
require.context(directory, useSubdirectories = false, regExp = /^.//)
第一个参数目标文件夹
是否查找子集 true | false
正则匹配
比如：
require.context('./router',true,/\.routes\.js/
可以理解为获取router文件下以.routes.js结尾的文件，知道这个以后，就可以在项目动态引入文件，方便使用了
vue全局注册组件
在项目中，我们都会针对项目的功能，将项目中高频出现的部分写成组件方便调用，这个时候可以使用require.context完成组件注册，省去在每个页面进行import的工作
比如：我们把组件全部写在components文件夹下，然后创建componentRegister.js使用require.context进行组件注册
function changStr(str){
return str.charAt(0).toUpperCase()+str.slice(1)
}
export default {
install(Vue) {
const requireAll=require.context("./components",false,/\.vue$/)
requireAll.keys().forEach((item)=>{
Vue.component(changStr(item.replace(/\.\//,'').replace(/\.vue$/,'')),requireAll(item).default)
})
}
}
然后只要在main.js里引入这个js文件，然后vue.use()注册就可以在所有页面调用组件了
比如在components下创建了HelloWorld.vue组件，在页面中只需要<HelloWorld/>这样就可以使用了
vue路由模块化
同理，也可以解决另一个问题，在vue项目中，路由文件会随着项目增大而越来越大，这个这个我们可以使用require.context进行模块化管理，首页定义好主路由，router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routerList = [];
function importAll(r) {
r.keys().forEach((key) => {
routerList.push(r(key).default);
});
}
importAll(require.context("../routes", true, /\.routes\.js/));//这里的目录和规则可以看自己习惯，这里获取的是routes下以.routes.js结尾的文件
const routes = [
...routerList,
];
const router = new VueRouter({
routes,
});
export default router;
这样就可以在routes下面按模块管理路由了，不管加入什么，只需要在routes下新建就可以了
本文由博客群发一文多发等运营工具平台 OpenWrite 发布
