我們專案開發中，經常需要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 檔案

importVuefrom'vue'; constcommonFilenameArr=[]; constrequireComponents=require.context('./',false,/\.vue/); requireComponents.keys().forEach(fileName=>{ //元件例項 constreqCom=requireComponents(fileName); //擷取路徑作為元件名 varreqComName=reqCom.name||fileName.replace(/\.\/(.*)\.vue/,'$1'); //元件掛載 Vue.component(reqComName,reqCom.default||reqCom); });

直接在 .vue 頁面引入 .js 檔案即可。列印看返回的arrList 資料。（ 看資料直接明瞭就會明白 ）

有問題，請大家指教