对于高频组件你还在这样引入么

使用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 = /^.//);

在components下的index.js中require.context('./common', false, /\.vue$/);

可以看到执行了keys()方法返回了一个由匹配文件的文件名组成的数组

我们注册组件是需要Vue.component(组件名,options) 
options是个对象
{
data:function(){},
template:'<button>点击计算点击次数</button>'
}

说明 changeStr将字符串首字母大写(组件注册一般首字母大写)// import Demo from '@/components/demo'

其中 let config = requireComponent(fileName)得到的是

我们在main.js中

最后全局注入组件完成

这些组件随处可用，无需再import，传值什么都也是正常的

// import Vue from "vue";
function changeStr(str) {
  //首字母大写
  return str.charAt(0).toUpperCase() + str.slice(1);
}
//找到上一级common目录下的.vue结尾的所有文件
const requireComponent = require.context("./common", false, /\.vue$/);

console.log(requireComponent.keys());
//["./child1.vue", "./child2.vue"]
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => {
    let config = requireComponent(fileName);
    let componentName = changeStr(
      fileName.replace(/^\.\//, "").replace(/\.\w+$/, "")
    );
    console.log(config);
    // console.log(componentName); //Child1   Child2
    Vue.component(componentName, config.default || config);
  });
};
export default {
  install,
};