store中需要引入很多modules/*.js , 可以使用require.context

store中需要引入很多modules/*.js , 可以使用require.context

require.context()

require.context() MDN

require.context(directory, useSubdirectories, regExp)
// 例子
require.context('./test', false, /\.test\.js$/);
// （創建出）一個 context，其中文件來自 test 目錄，request 以 `.test.js` 結尾。

• directory：要搜索的目錄
• 是否搜索其子目錄
• 匹配文件的正則表達式

一個 context module 會導出一個（require）函數，此函數可以接收一個參數：request。 此導出函數有三個屬性： resolve, keys, id 。

• resolve 是一個函數，返回request 被解析後得到的模塊id；

• keys 也是一個函數，返回一個數組，由所有可能彼此 context module 處理的請求組成；

• id 是 context module 裏面所包含的模塊 id. 它可能在你使用 module.hot.accept 時會用到。

  例子：引入一個文件夾下面的所有js文件

  function importAll (r) {
      r.keys().forEach(r);
  }
  importAll(require.context('../components/', true, '/\.js$/'));
  

  var cache = {};
  
  function importAll (r) {
    r.keys().forEach(key => cache[key] = r(key));
  }
  
  importAll(require.context('../components/', true, /\.js$/));
  // 在構建時(build-time)，所有被 require 的模塊都會被填充到 cache 對象中。
  

原：store/index.js

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

import permission from './modules/permission'
import user from './modules/user'
import tagsView from './modules/tagsView'
import roleManage from './modules/roleManage'
import userManage from './modules/userManage'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    permission,
    user,
    tagsView,
    roleManage,
    userManage
  },
  getters,
  strict: false
})

export default store

改：可以使用require.context

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

const modulesFiles = require.context('./modules', false, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  getters,
  strict: false
})

export default store

好文章推薦 - 掘金 - 加快Vue項目的開發速度