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

　　　　隨着項目的復雜，文件結構越來越多，Store中modules中的文件也越來越多，如果一個一個加載是不是很麻煩呢？

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

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

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import user from './modules/user';
import info from './modules/info';
//此處省略N多文件。。。。。

export default new Vuex.Store({
    modules: {
        user,
        info
    },
});

　　通過上述引入雖然可以達成效果但是如果有很多文件呢？難道也要一個一個引入？那么如何動態加載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項目當中呢？

import Vue from 'vue';
import Vuex from 'vuex';
import camelcase from 'camelcase’;    //駝峰命名的一個npm包
Vue.use(Vuex);

const context = require.context('./modules', false, /\.js$/);
    //獲取moudules文件下所有js文件；
const moduleStores = {};

context.keys().forEach(key => {
    // context.keys()    返回匹配成功模塊的名字組成的數組
    const fileName = key.slice(2, -3);
    //截取名字
    const fileNameInCamelCase = camelcase(fileName);
    //camelcase 是一個駝峰命名包；
    const fileModule = context(key).default;
    //通過 context(key)導出文件內容。在文件中時通過 export.default 導出的，所以后邊加.default
    moduleStores[fileNameInCamelCase] = {
        ...fileModule,
        namespaced: true,    //文件中有寫可以省略；不過這樣寫可以不用給每個文件寫入；這個屬性不知道自己去查文檔；
    };
});

export default new Vuex.Store({
    modules: {
        ...moduleStores,
    },
});

　　通過以上方法就可以動態的導入modules文件夾中的所有js文件，這樣就方便管理了，也不用一個個引入；

　　如果你某個文件不想引入可以在forEach中，通過判斷來解決：

context.keys().forEach(key => {
  const fileName = key.slice(2, -3);
  const fileNameInCamelCase = camelcase(fileName);
  const fileModule = context(key).default;

  if (fileName === 'user') {
 7     return;
 8   }
  moduleStores[fileNameInCamelCase] = {
    ...fileModule,
    namespaced: true,
  };
});

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