webpack 的 require.context 函數(shù)可以用來創(chuàng)建自己的 context续镇。webpack 會在構建中解析代碼中的 require.context()。
require.context('./test', false, /\.test\.js$/);
//（創(chuàng)建出）一個 context呼奢，其中文件來自 test 目錄确买，request 以 `.test.js` 結(jié)尾右犹。
這行代碼會去當前目錄下的 test 文件夾 (不包括子目錄) 下找所有以.test.js結(jié)尾的能被 require 的文件丹擎。
更直白地說就是，我們可以通過正則匹配引入相應的文件模塊镰踏。
require.context 方法有三個參數(shù)：
-
directory：要檢索的目錄 -
useSubdirectories：是否檢索子目錄函筋，默認是 true -
regExp：匹配文件的正則表達式
正文開始：
-
我們先創(chuàng)建一個 GlobalComs 目錄，里面放需要注冊到全局的組件奠伪。建議只包含經(jīng)常使用且體積不大的組件跌帐，不然打包出來的初始 js 太大就不好了。
-
給組件提供
name绊率，不然注冊時就采用.vue文件的文件名命名
UploadSingle 組件 在 GlobalComs 目錄下新建一個
index.js文件：
import Vue from 'vue'
// 自動注冊全局組件
function registerAllComponents(requireContext) {
return requireContext.keys().forEach(comp => {
const vueComp = requireContext(comp)
// default.name 就是我們 .vue 組件導出的 name
// 這塊邏輯需要根據(jù)自己的命名習慣去調(diào)整
const compName = vueComp.default.name ? vueComp.default.name : /\/([\w-]+)\.vue$/.exec(comp)[1]
Vue.component(compName, vueComp.default)
})
}
// 注冊當前目錄下的所有 .vue 文件谨敛，包括子目錄
registerAllComponents(require.context('./', true, /\.vue$/))
- 在
src/main.js導入這個文件即可：
// 自動注冊全局組件
import './components/GlobalComs'
- 可以在任意模版中愉快地直接使用了：
<template>
<div class="app-container">
...
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryInfo.page"
:limit.sync="queryInfo.pageSize"
@pagination="fetchData"
/>
<el-dialog>
<upload-single v-model="newIslander.photoSrc" drag />
</el-dialog>
...
</div>
</template>
完事兒～
