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 文件即可。像正常組件一樣，直接引入使用

 

有問題，請大家指教