vue 引入公共組件之 require.context

require.context是webpack中，用來建立本身的（模塊）上下文

webpack 會在打包構建代碼中解析它

require.context接收三個參數：

1. 要搜索的文件夾目錄
2. 是否搜索它的子目錄
3. 以及一個匹配文件的正則表達式

require.context('../views/components', true, /\.vue/)
複製代碼

在咱們項目中，有不少自定義的全局組件，使用這個將會很是方便，下面舉例說明

我這裏只寫了兩個，當咱們有一百個的時候，若是手動全局引入。。。

這將是慘不忍睹的

因此，投機取巧的咱們，利用了 require.context

import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結果
// 遍歷出每一個組件的路徑
requireComponents.keys().forEach(fileName => {
  // 組件實例
  const reqCom = requireComponents(fileName)
  // 截取路徑做爲組件名
  const reqComName = fileName.split('/')[1]
  // 組件掛載
  Vue.component(reqComName, reqCom.default || reqCom)
})

複製代碼

一段話搞定一整個文件夾的組件，是否很方便