创建时间 2021 年 09 月 11 日
今天了解到了 Webpack 的 require.context() API。嗯，看来是我火星了，哈哈哈。不管了，先记录一下这玩意怎么用。
先来个文档链接
之前在二次封装一个表格时，遇到一个问题，就是有一些表单组件需要统一 import 到一个根文件中, 然后统一 export ，当时的写法就是这样：
export Input from "./input.vue"
export Select from "./select.vue"
export Radio from "./radio.vue"
export Switch from "./switch.vue"
//...这货可不好维护，后续如果有新增的组件，还得单独到这里导出。require.context() 看起来应该可以解决这个问题，先看一下文档。
You can create your own context with the
require.context()function.It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.
Webpack parses for
require.context()in the code while building.
翻译过来就是：
你可以使用
require.context()函数创建自己的上下文。它允许你传入要搜索的目录、是否也要搜索子目录以及匹配文件的正则表达式。
Webpack 在构建时解析代码中的
require.context()。
require.context(
directory, // 要搜索的目录, 相对于当前目录
(useSubdirectories = true), // 是否搜索子目录
(regExp = /^\.\/.*$/), // 匹配文件的正则表达式
(mode = 'sync') // 这个应该是定义是异步加载还是同步加载，设置成 ‘lazy’ 后 require.context() 会变成异步函数。不过这个一般不用管。
);有一点要注意的，就是 require.context() 的入参必须都是字面量，不能是变量
require.context() 函数将会返回一个包含 resolve、keys、 id 属性的函数。
resolve()它返回请求被解析后得到的模块 id。 说人话就是返回匹配到的文件的路径，这个路径相对于整个工程文件的根目录keys()它返回一个上下文模块可以处理的所有请求的数组。说人话就是返回一个 匹配到的文件的路径 的数组，这个路径相对于directoryid是上下文模块的模块 id。
看起来很复杂，其实不然，如果我们只是为了自动导入导出 module 的话，那将会很简单。
这是我们的目录
components // 组件文件夹文件夹
|-- input.vue
|-- select.vue
|-- radio.vue
|-- switch.vue
|-- index.js // 根文件
其实也很简单，直接看代码就行
// 创建一个包含了 components 文件夹（不包含子目录）、所有文件名以 `.vue` 结尾的、能被 require 请求到的文件的上下文。
const files = require.context("./components", false, /\.vue$/)
const components = {}
// 返回一个文件路径的数组
files.keys().forEach(key => {
// 读取出文件中的default模块
const module = files(key).default
// 组件里声明一下 name 的属性
components[module.name] = module
})
export default componentsrequire.context() 这个 API 能够减少一些繁琐的导入导出语句，能让代码更灵活一些。