简介:

require.context是webpack中，用来创建自己的（模块）上下文；webpack会在代码构建的时候去解析该函数

使用:

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

该方法可以接收3个参数：

1. 需要搜索的文件夹目录（必传）
2. 是否需要搜索它的子孙目录，默认为false
3. 一个匹配文件的正则表达式

我的目录结构如下:

使用api输出如下:

console.log(1,require.context('./', false, /index\.js$/))

想拿到取到的目录我们还要通过keys()去取,更改代码如下:

console.log(2,require.context('./', false, /index\.js$/).keys())

当我们设置第二个参数为true后,就会遍历所有的子目录找到目标文件

console.log(2,require.context('./', true, /index\.js$/).keys())

文档地址:https://webpack.docschina.org/guides/dependency-management/#requirecontext

利用上面这个特性,我们可以在vue等应用中实现自动化注册:

应用:

自动化注册vuex:

文件目录如下:

store目录下的index.js如下 :

import Vue from 'vue'
import Vuex from 'vuex'

import * as types from './types';

Vue.use(Vuex)

// 动态加载modules
const modules = {
    
    }
const files = require.context('./', true, /index\.js$/);
files.keys().filter(key => {
    
    
  if (key === './index.js') return false;
  return true
}).map(key => {
    
      
  // 获取名字
  const modulePath = key.replace('./modules/', '');
  const moduleName = modulePath.replace('/index.js', '');
  const module = require(`${
      
      key}`);

  modules[`${
      
      moduleName}`] = module.default;
})


const store = new Vuex.Store({
    
    
  state: {
    
    

  },
  mutations: {
    
    

  },
  actions: {
    
    

  },
  getters: {
    
    

  },
  modules: modules
})

export default store

modules中的index.js中:

import * as types from './types.js'
export default {
    
    
  namespaced: true,
  state: {
    
    
  },
  mutations: {
    
    
  },
  actions: {
    
    
  },
  getters: {
    
    
  }
}

至此,一个简单省力的自动化注册vuex模块就巧妙的完成了,以后有更多组件或者页面,只要在store中继续添加,即可自动注册,维护性和扩张性很强

自动化注册router路由:

同理路由也可以实现自动化注册
路由相关目录如下:

router/index.js中代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1.安装VueRouter
Vue.use(VueRouter)

// 2.获取路由信息
// 动态加载pages中所有的路由文件
const files = require.context('@/pages', true, /router\.js$/);
// console.log(files.keys())           //["./home/router.js", "./login/router.js"]
const routes = files.keys().map(key => {
    
    
  const page = require('@/pages' + key.replace('.', ''));
  return page.default;
})

// console.log(routes)

// 3.创建路由对象
const router = new VueRouter({
    
    
  mode: 'history',
  routes
})

// 4.导出
export default router

/home/router.js 和 /login/router.js 代码如下:

const Login = () => import('./login.vue')
export default {
    
    
  path: '/login', 
  name: 'login',
  component: Login,
  children: [
  ]
}

至此,一个简单的路由自动注册就完成了,当然,每个项目的结构都不一样,可以根据自己的项目定制出独有的自动化注册方案,哈哈

自动注册组件

这部分其实文档有介绍,可以直接看文档更清晰
文档地址:https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

自动引用目录下的文件/函数,等等

比如我现在想要造一个自己的工具库utils，那么随着工具函数数量的增加，势必需要将代码分割得更小，甚至细化到一个工具函数对应一个js文件。

这时如果还需要在入口js文件中一个个手动引用，那么每增加一个js文件，就需要重新去修改入口js一次，工程量是非常大的。

let moduleExports = {
    
    };

const r = require.context('./', true, /^\.\/.+\/.+\.js$/);
r.keys().forEach(key => {
    
    
    let attr = key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
    moduleExports[attr] = r(key);
});

module.exports = moduleExports;