使用require.context实现自动导入vue项目路径（年轻人不得不会的装杯小技巧）

require.context的简历

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

//这个是我们生成的对象一会用
const modules = {}

//这个 require.context('我们的路径', 是否格式固定是true, 正则表达式)
const files = require.context('./modules', true, /\.js$/) // 引入对应的资源
//这个会匹配到./modules文件夹下的所有的js文件

我们看下我们生成的代码

import Vue from 'vue'
import Vuex from 'vuex'
// import students from './modules/students'

// 通过require.context引入对应的文件，加载，可以省去我们引入并使用的过程

// 一下写法是固定，所有的项目里的modules的引入都是这样的

const modules = {}
const files = require.context('./modules', true, /\.js$/) // 引入对应的资源

// console.log(files.keys()) // [所有文件的路径]

// console.log(files(路径)) // 对应路径的文件的模块内容

files.keys().forEach(path => {
  // path是一个 ./xxx.js
  let module = files(path) // 获取到对应的模块的内容
  module = module.default ? module.default : {} // 真实内容是.default，但是如果模块中什么都没写就没有default
  // 给modules中设置模块名为文件名的名字（./文件名.js 所以要裁切一下）  把导入的内容作为文件名的对应的值
  modules[path.slice(2, -3)] = { 
    namespaced: true,
    ...module
  }
})

// console.log(modules)

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules // 把最终生成的modules设置给modules
})