vue 引入公共组件之 require.context
我们项目开发中，经常需要import或者export各种模块，那么有没有什么办法可以简化这种引入或者导出操作呢？答案是肯定的，下面就为大家介绍一下require.context
以前我们都是通过import 方式引入组件
import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'这样很蛋疼，因为每加一个组件，可能都要写这么一句，这样有规律的事，是否可以通过自动化完成?
require.context
require.context(directory, useSubdirectories, regExp)- directory: 要查找的文件路径
- useSubdirectories: 是否查找子目录
- regExp: 要匹配文件的正则
用法
require.context('./components/', true, /\.js$/)
上面调用方法，到底返回的是什么？
var map = {
"./A.js": "./src/components/test/components/A.js",
"./B.js": "./src/components/test/components/B.js",
"./C.js": "./src/components/test/components/C.js",
"./D.js": "./src/components/test/components/D.js"
};
function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}项目实际使用方法一：
在当前 .vue页面 公共组件components 文件夹内，创建一个 .js 文件
import Vue from 'vue';
const commonFilenameArr = [];
const requireComponents = require.context('./', false, /\.vue/);
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName);
// 截取路径作为组件名
var reqComName = reqCom.name || fileName.replace(/\.\/(.*)\.vue/, '$1');
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom);
});直接在 maing.js 引入 .js 文件即可。像正常组件一样，直接引入使用
有问题，请大家指教
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-08-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读