利用 webpack 的 require.context 自动注
2021-08-07 本文已影响0人
AizawaSayo
webpack 的 require.context 函数可以用来创建自己的 context。webpack 会在构建中解析代码中的 require.context()
。
require.context('./test', false, /\.test\.js$/);
//(创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。
这行代码会去当前目录下的 test 文件夹 (不包括子目录) 下找所有以.test.js
结尾的能被 require 的文件。
更直白地说就是,我们可以通过正则匹配引入相应的文件模块。
require.context 方法有三个参数:
-
directory
:要检索的目录 -
useSubdirectories
:是否检索子目录,默认是 true -
regExp
:匹配文件的正则表达式
正文开始:
-
我们先创建一个 GlobalComs 目录,里面放需要注册到全局的组件。建议只包含经常使用且体积不大的组件,不然打包出来的初始 js 太大就不好了。
-
给组件提供
UploadSingle 组件name
,不然注册时就采用.vue
文件的文件名命名
-
在 GlobalComs 目录下新建一个
index.js
文件:
import Vue from 'vue'
// 自动注册全局组件
function registerAllComponents(requireContext) {
return requireContext.keys().forEach(comp => {
const vueComp = requireContext(comp)
// default.name 就是我们 .vue 组件导出的 name
// 这块逻辑需要根据自己的命名习惯去调整
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>
完事儿~