require.context()实现前端工程自动化

1.问题描述

不知道小伙伴们有没有在注册全局组件的时候不断的import,十分想写个循环将公共组件注册，require.context()函数就是能满足这个愿望

2.require.context()是什么

是一个webpack的API,当我们想从一个文件夹下引入多个文件的时候，就可以使用它，它会自动的遍历指定文件夹下的指定文件

3.如何使用require.context()

require.context()函数接收三个参数

const files = require.context(‘@/components‘, true, /index\.vue$/)

第一个参数：指定遍历的文件夹路径
第二个参数：是否遍历文件的子目录
第三个参数：匹配文件的正则表达式

4.require.context()的返回值

require.context()函数执行后返回的是一个函数，此函数具有三个属性

• resolve
  接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
• keys
  返回匹配成功文件的相对路径组成的数组
• id
  执行环境的id,返回的是一个字符串

示例：

1. 文件目录
   

2. 遍历components文件夹子目录下的index.vue文件，并将组件挂载到Vue上
   

3. 控制台输出
   
   

4. main.js文件夹下引入
   

require.context()实现前端工程自动化

原文：https://www.cnblogs.com/ITwj-115/p/15224035.html