高頻組件你還在import嗎？太low了

對於高頻組件你還在這樣引入麼

使用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,
};

複製代碼