使用require.context实现前端工程自动化

在vue项目中 使用require.context()实现前端工程化引入文件

1. require.context函数接受三个参数
   • directory {String} -读取文件的路径
   • useSubdirectories {Boolean} -是否遍历文件的子目录
   • regExp {RegExp} -匹配文件的正则
   • 语法: require.context(directory, useSubdirectories = false, regExp =/^.//)
2. 使用场景:
   如下图所示,在vuex index.js中导入modules下多个.js文件
   

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
/* import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user' */

const req = require.context('./modules/', false, /\.js$/)
const mName = req.keys().map(item => item.split('./')[1]).map(item => item.split('.js')[0])
const mModel = req.keys().map(req)
// console.log(mName)
// console.log(mModel)
const obj = {}
mName.forEach((key, index) => {
  obj[key] = mModel[index].default
})
// console.log(obj)
Vue.use(Vuex)

const store = new Vuex.Store({
  /*  modules: {
    app,
    settings,
    user
  }, */
  modules: obj,
  getters
})

export default store

导入一个目录下的所有svg图片

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)