OTT 前端技术

webpack 去中心化

1. 背景介绍

  日常我们在用前端工程化项目中，会引入各个模块。如vue-router vuex redux react-router等等

2. webpack提供的 require.context函数

  require.context(directory, useSubdirectories , regExp = /^\.\//);\
    //directory: 要搜索的目录
    //useSubdirectories: 是否遍历子目录
    //regExp: 匹配文件名的正则表达式
    // 返回require 函数 此导出函数有三个属性：resolve, keys, id。
        //resolve 是一个函数，它返回 request 被解析后得到的模块 id。
        //keys 也是一个函数，它返回一个数组 

3. 代码

  /** 
   * 以vuex 为例
   * 我们将store 分为小模块放在store目录下
   store
      |-index.js
      |-user.js
      |-produects.js
  */

  /* user.js  produects.js  start*/
  export default {
    state: {},
    mutations: {}
    actions: {}
  }
  /**  end ***/

  /****  index.js  start *****/
  // index.js 作为路由中心 
  const file = require.context('./', false, /\.js$/)
  const routerModules = file.keys().reduce((temp, path) => {
    if (path !== './index.js') {
      temp[path.slice(2, -3)] = file(path).default
    }
    return temp
  }, {})

  // console.log(modules);
  Vue.use(Vuex)
  export default new Vuex.Store({
    modules: {
      ...routerModules
    }
  })
  // 此时 store目录下所有js文件都将是store的一个模块而不需要手动引入
  /****  index.js  end *****/