vuex前端工程化之動態導入文件--require.context( )

　　　　隨着項目的複雜，文件結構愈來愈多，Store中modules中的文件也愈來愈多，若是一個一個加載是否是很麻煩呢？

先看一個項目中store項目結構：

　　過去都是經過import分別引入文件：

 1 import Vue from 'vue';
 2 import Vuex from 'vuex';
 3 
 4 Vue.use(Vuex);
 5 
 6 import user from './modules/user';
 7 import info from './modules/info';
 8 //此處省略N多文件。。。。。
 9 
10 export default new Vuex.Store({
11     modules: {
12         user,
13         info
14     },
15 });

　　經過上述引入雖然能夠達成效果可是若是有不少文件呢？難道也要一個一個引入？那麼如何動態加載modules文件下的全部JS文件呢？

　　那麼這裏就會用到webpack文檔中的require.context( ) ，來實現前端工程化；

 　　　require.context( )語法以下：

    require.context(directory, useSubdirectories = false, regExp = /^.//);

　　　　示例:

require.context("./test", false, /\.test\.js$/);
    // （你建立了）一個test文件夾下面（不包含子目錄），能被require請求到，全部文件名以 `.test.js` 結尾的文件造成的上下文（模塊）。

require.context("../", true, /\.stories\.js$/);
    // （你建立了）一個父級文件夾下面（包含子目錄），全部文件名以 `.stories.js` 結尾的文件造成的上下文（模塊）。

 　　那麼咱們怎麼把它應用到Vue項目當中呢？

 1 import Vue from 'vue';
 2 import Vuex from 'vuex';
 3 import camelcase from 'camelcase’;    //駝峯命名的一個npm包
 4 Vue.use(Vuex);
 5 
 6 const context = require.context('./modules', false, /\.js$/);
 7     //獲取moudules文件下全部js文件；
 8 const moduleStores = {};
 9 
10 context.keys().forEach(key => {
11     // context.keys()    返回匹配成功模塊的名字組成的數組
12     const fileName = key.slice(2, -3);
13     //截取名字
14     const fileNameInCamelCase = camelcase(fileName);
15     //camelcase 是一個駝峯命名包；
16     const fileModule = context(key).default;
17     //經過 context(key)導出文件內容。在文件中時經過 export.default 導出的，因此後邊加.default
18     moduleStores[fileNameInCamelCase] = {
19         ...fileModule,
20         namespaced: true,    //文件中有寫能夠省略；不過這樣寫能夠不用給每一個文件寫入；這個屬性不知道本身去查文檔；
21     };
22 });
23 
24 export default new Vuex.Store({
25     modules: {
26         ...moduleStores,
27     },
28 });

　　經過以上方法就能夠動態的導入modules文件夾中的全部js文件，這樣就方便管理了，也不用一個個引入；

　　若是你某個文件不想引入能夠在forEach中，經過判斷來解決：

 1 context.keys().forEach(key => {
 2   const fileName = key.slice(2, -3);
 3   const fileNameInCamelCase = camelcase(fileName);
 4   const fileModule = context(key).default;
 5 
 6   if (fileName === 'user') {
 7     return;
 8   }
 9   moduleStores[fileNameInCamelCase] = {
10     ...fileModule,
11     namespaced: true,
12   };
13 });

　　
           管理依賴-webpack中文檔(2.2)-更多詳細內容可查 ：  https://www.html.cn/doc/webpack2/guides/dependency-management/