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

更新日期: 2020-11-01阅读: 1.5k标签: 自动化

require.context是什么

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


什么时候需要用到require.context

vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,随着项目越来越大,结构越来越复杂,每次都得手动import就很是令人烦躁
这个时候我们可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中


require.context参数说明

require.context函数接受三个参数

  1. directory {String} -读取文件的路径
  2. useSubdirectories {Boolean} -是否遍历文件的子目录
  3. regExp {RegExp} -匹配文件的正则
//例如
require.context('./modules', false, /.test.js$/)
/*
上面的代码遍历当前目录下的modules文件夹的所有.js结尾的文件,不遍历子目录
就像这样
 */
router                           // 路由文件夹
  |__index.js                    // 总入口,这里做一些自动化处理
  |__common.js                   // 通用路由:声明通用路由
  |__modules                     // 业务逻辑模块:所以的业务逻辑模块
        |__b.js              	 // 业务模块b
        |__home.js               // 业务模块home:业务模块
        |__a.js                  // 业务模块a
  

在index.js中调用 require.context('./modules', false, /.js$/);会得到modules文件下3个文件的执行环境

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性

  1. resolve {Function} -接受一个参数request,request为modules文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
  2. keys {Function} -返回匹配成功模块的名字组成的数组
  3. id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)


废话不多说 直接上代码,看看怎么用

index.js自动化文件中这么写

const files = require.context('./modules', false, /\.js$/)

console.log(files.keys()) // ["./home.js"] 返回一个数组
let configRouters = []
/**
* inject routers
*/
files.keys().forEach(key => {
  configRouters = configRouters.concat(files(key).default) // 读取出文件中的default模块
})
export default configRouters // 抛出一个Vue-router期待的结构的数组

业务模块中这样写

import Frame from '@/views/frame/Frame'
import Home from '@/views/index/index'
export default [
    // 首页
    {
      path: '/index',
      name: '首页',
      redirect: '/index',
      component: Frame, 
      children: [ // 嵌套路由
        {
          path: '',
          component: Home
        }
      ]
    }
]

大功告成!!!!


链接: https://fly63.com/article/detial/10029

mocha自动化测试程序:node.js测试框架Mocha源码分析

Mocha.js是被广泛使用的Javascript测试框架,在浏览器和Node环境都可以使用。Mocha提供TDD和BDD的测试接口。 Mocha提供了:断言单元测试,可以进行功能性测试,同步代码测试,异步代码测试

Web UI 自动化测试技术选型

对于 UI 自动化测试来说,许多所谓框架之间并没有太多差别,也从来不是影响整套测试用例是否健壮的关键性因素。相比之下,如何提高测试用例稳定性以及出现错误时 debug 的便捷性才是让 UI 自动化测试方案落地的重要细节。

什么时候需要自动化?

自动化是科技行业前进的方向,但它也是一把双刃剑。做对了,能够削减费用开销,减少维护工作;做错了,会让流程更加复杂,并增加预算。就像任何技术或流程一样,自动化在某些时候、某些地方是有效的,而在其他一些领域

十大最佳自动化测试工具

对更快交付高质量软件(或\\\\\\\"快速质量\\\\\\\")的需求要求组织以敏捷,持续集成(CI)和DevOps方法论来寻找解决方案。测试自动化是这些方面的重要组成部分。最新的《 2018-2019年世界质量报告》表明

理解前端自动化测试TDD + BDD

在日常的开发中,整天赶需求的我们好像没有时间顾及自动化测试,尤其是在敏捷开发的时候。但其实自动化测试可以帮助我们提高代码和功能的健壮程度,大幅减少可能出现的bug。尤其是在复杂系统中

前端赋能业务 - Node实现自动化部署平台

是否有很多人跟我一样有这样的一个烦恼,每天有写不完的需求、改不完的BUG,每天撸着重复、繁琐的业务代码,担心着自己的技术成长

使用自动化时的五个常见错误

随着自动化扩展到涵盖 IT 的更多方面,越来越多的管理员正在学习自动化技能并应用它们来减轻他们的工作量。自动化可以减轻重复性任务的负担,并为基础设施增加一定程度的一致性

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!