require.context批量引入文件

require.context 是什么

require.context 是由webpack内部实现，require.context在构建时，webpack 在代码中进行解析。

当需要引入文件夹内多个文件模块时，可以使用 require.context 自动化批量引入，而不用手动一条一条添加。

参数

require.context 函数接收三个参数

• String 读取文件夹的路径
• Boolean 是否遍历文件夹的子目录
• RegExp 匹配文件的正则

如何使用

用我实际开发的场景来做例子，现在文件夹内有多个 api 文件，我需要将这些组合起来

api.js

代码语言：javascript复制

//引入api文件夹下的api接口
let requireAll = require.context('./api', false, /.js$/)
//requireAll.keys()为文件名数组; requireAll(apiName)获取文件暴露的内容
const apiArr = requireAll.keys().map(apiName=> requireAll(apiName).default || requireAll(apiName))
//组合接口
let api = apiArr.reduce((prev,curr)=> Object.assign(prev,curr), {})

export default api

代码语言：javascript复制

ruquireAllApi(apiName).default 获取的是Es6规范暴露的内容（如：export default）

代码语言：javascript复制

ruquireAllApi(apiName) 获取的是CommonJs规范暴露的内容(如：module.exports)

webpack api javascript 打包

0 人点赞