require.context批量引进文件(个人笔记)

本文参考： 自动化引入模块

在开发中大型项目时，会将一个大功能拆分成一个个小功能，除了能便于模块的复用，也让模块条理清晰，后期项目更好维护。

像 api 文件一般按功能划分模块，在组合时可以使用 require.context 一次引入文件夹所有的模块文件，而不需要逐个模块文件去引入。每当新增模块文件时，就只需要关注逻辑的编写和模块暴露，require.context 会帮助我们自动引入。

需要注意 require.context 并不是天生的，而是由 webpack 提供。在构建时，webpack 在代码中解析它。

let importAll = require.context('./modules', false, /\.js$/)

class Api extends Request{
    constructor(){
        super()
        //importAll.keys()为模块路径数组
        importAll.keys().map(path =>{
            //兼容处理：.default获取ES6规范暴露的内容; 
            //后者获取commonJS规范暴露的内容
            let api = importAll(path).default || importAll(path)
            Object.keys(api).forEach(key => this[key] = api[key])
        })
    }
}

export default new Api()

require.context 参数：

• 文件夹路径
• 是否递归查找子文件夹下的模块
• 模块匹配规则，一般匹配文件后缀名
  只要是需要批量引入的场景，都可以使用这种方法。包括一些公用的全局组件，只需往文件夹内新增组件即可使用，不需要再去注册。如果还没用上的小伙伴，一定要了解下，简单实用又能提高效率。

全局组件批量注册

解决的问题：封装的多次使用的组件不用在每个用到的vue文件里都引进、注册一次，这样会出现很多重复的引入和注册代码。因此我们可以通过一个全局的Js文件来管理，将需要多次使用的组件进行全局注册，使用的时候直接调用即可。

步骤一：在公有组件文件夹components下新建文件globalComponent.js

import Vue from 'vue' // 引入vue

// 处理首字母大写 abc => Abc
function changeStr(str){
    return str.charAt(0).toUpperCase() + str.slice(1)
}

/*
    require.context(arg1,arg2,arg3)
        arg1 - 读取文件的路径
        arg2 - 是否遍历文件的子目录
        arg3 - 匹配文件的正则
        返回值是一个函数
*/
// 拿到components文件夹下所有的组件
const requireComponent = require.context(
    '.', // 其组件目录的相对路径
    false, // 是否查询其子目录,如果components文件夹下还有文件夹就设为true
    /\.vue$/ // 匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName)
    console.log('config:',config)  // 打印
    const componentName = changeStr(
        // 对获取到的文件名进行处理，./child1.vue => child1
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   
    )
    // 动态注册该目录下的所有.vue文件
    Vue.component(componentName, config.default || config) 
})

步骤二：将globalComponent.js引入main.js

// main.js
import  './components/globalComponent'

步骤三：使用这类组件不再需要引入和注册，直接标签使用即可

<template>
  <div>
    <h1>I am HelloWorld</h1>
    <Child1></Child1>
  </div>
</template>