webpack中require.context自动化注册,vue应用_webpack 代码注册路由_codingWeb的博客

相关文章推荐
有情有义的枇杷 · org.springframework.da ...· 4 月前 ·
年轻有为的麻辣香锅 · AUTOSAR笔记_autosar ...· 8 月前 ·
高兴的眼镜 · Python数据处理 | ...· 9 月前 ·
不拘小节的单车 · soap和wsdl区别说明-腾讯云开发者社区 ...· 1 年前 ·
千年单身的红薯 · python+selenium ...· 1 年前 ·
require.context是webpack中，用来创建自己的（模块）上下文；webpack会在代码构建的时候去解析该函数
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
该方法可以接收3个参数： 
需要搜索的文件夹目录（必传）
是否需要搜索它的子孙目录，默认为false
一个匹配文件的正则表达式 
我的目录结构如下:
 
 使用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;
例如 require.context("@/views/components",false,/.vue$/)
1、常常用来在组件内引入多个组件。
const path = require('path')
const files = require.contex
                                    大家在写vue路由的时候，一般会采取什么样的方法呢？在router的index.js中直接把路由写完，还是把每个页面抽出来再到router的index.js里引入？
两种好像都停麻烦，第一种页面多了都聚合在一个js文件里，不利于管理。第二种虽然抽离了每个页面的路由，但是每个都要在router中import，页面多了，就会麻烦。
node.js里面的一种方法可以很好应用在路由以及其他加载模块的需求上，require.context()
这是我的路由文件结构
初识 require.context
require.context是webpack中，用来创建自己的（模块）上下文
webpack会在构建的时候解析代码中的require.context()
require.context函数接收三个参数：
1. 要搜索的文件夹目录
2. 是否还应该搜索它的子目录
3. 以及一个匹配文件的正则表达式
// 语法
require.context(directory, useSubdirectories = false, regExp = /^
                                    简化文件中需要多个 import/require 的情况，该方法可以引入多个文件，并整理成数组。
require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则
这是文件结构，公司常用的vue项目vuex封装
我们在外部的index.js中使用如下函数
const files = require.context(".
                                    require.context：
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。
require.context(directory, useSubdirect...
import os
from common.excel_handler import excel_handler
from common.request_handler import requests_handler
from config import config
#准备数据驱动
@ddt.ddt
class Test_demo(unittest.TestC