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)

1. directory: 要查找的文件路径
2. useSubdirectories: 是否查找子目录
3. 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 文件即可。像正常组件一样，直接引入使用

 

有问题，请大家指教