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

偏执的太偏执、 2023-03-13 11:53 9阅读 0赞

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

### 目录 ###

*   *   *  require.context()
         *  原：store/index.js
         *  改：可以使用\`require.context\`

### require.context() ###

[require.context() MDN][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项目的开发速度 ][- _ - _Vue_]

[require.context_ MDN]: https://webpack.docschina.org/guides/dependency-management/#require-context
[- _ - _Vue_]: https://juejin.im/post/5c106485e51d450e657571a6#heading-1