目录
对于高频组件你还在这样引入么
# 使用 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
};