• vue管理系统从0到1-文件自动导入
  • Artiely
  • #vue
  • 2020-06-05
  • 253
  • 2 min read
  • loading...

使用require.context实现模块导入自动化

require.context是什么

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
文档

require.context函数接受三个参数

  • directory {String} -读取文件的路径

  • useSubdirectories {Boolean} -是否遍历文件的子目录

  • regExp {RegExp} -匹配文件的正则

自动化导入组件示例

import Vue from 'vue'

const componentsContext = require.context('./', true, /\.vue$/)

componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component)
  if (component.startsWith('./index')) {
    return
  }
  const ctrl = componentConfig.default || componentConfig
  Vue.component(ctrl.name, ctrl)
})
复制成功
1
2
3
4
5
6
7
8
9
10
11
12

自动化导入api示例

let apiSource = {}
function initApi() {
  const apiContext = require.context('./modules/', true, /\.js$/)
  let apiList = []

  apiContext.keys().forEach(api => {
    const apiModle = apiContext(api)
    apiList = { ...apiList, ...(apiModle.default || apiModle) }
  })
  apiSource = apiList
  return apiList
}
let apiList = initApi()
let api = { ...apiList }
const Api = function(Vue) {
  if (Api.installed) return
  Api.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return api
      },
    },
  })
}
export { api, Api, apiSource }
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

store自动化导入的示例

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
// https://github.com/robinvdvleuten/vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
import utils from '@/common/utils'
let { getVersion } = utils
Vue.use(Vuex)

const storeContext = require.context('@store/modules', true, /\.js$/)
let modules = {}
storeContext.keys().forEach(vuex => {
  const storeModle = storeContext(vuex)
  let store = vuex.split('/')
  let name = store[store.length - 1].split('.js')[0]
  let namespace = {}
  namespace[name] = storeModle.default
  modules = { ...modules, ...namespace }
})

// let __VERSION = getVersion()
const store = new Vuex.Store({
  modules: modules,
  plugins: [
    createLogger(),
    createPersistedState({
      // key = 版本号
      // key: __VERSION,
      storage: window.sessionStorage
    })
  ]
})
export default store
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

以上只是require.context的使用示例,工作中可结合实际情况具体分析和使用。