小技巧之require.context的使用
01
前 言
在项目开发中，经常需要import或者export各种模块
经常会这样引入组件：
import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'
// ...这样很头疼，因为每加一个组件，可能都要写这么一句，这样有规律的事，是否可以通过自动化完成?
答案是肯定的，那就是使用require.context
那么有没有什么办法可以简化这种引入或者导出操作呢？答案是肯定的，下面就为大家介绍一下require.context
02
require.context
语法：
require.context(directory, useSubdirectories, regExp)- directory: 要查找的文件路径
- useSubdirectories: 是否查找子目录
- regExp: 要匹配文件的正则
用法：
require.context('./components/', true, /\.js$/)
看下keys是作用
const ctx = require.context('./components/', true, /\.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]其实就是
var map = {
"./A.js": "./src/components/test/components/A.js",
"./B.js": "./src/components/test/components/B.js",
"./C.js": "./src/components/test/components/C.js",
"./D.js": "./src/components/test/components/D.js"
};
Object.keys(map)那么如何引入ABCD组件呢？
const ctx = require.context('./components/', true, /\.js$/)
const map = {}
for (const key of ctx.keys()) {
map[key] = ctx(key)
}
console.log(map)
看到了吧！成功import进来了，但'./A.js'这样的key有点不太好，自己可以处理字符串生成自己想要的key
03
优化的公共方法
可以优化一下，生成一个公共的方法
const importAll = context => {
const map = {}
for (const key of context.keys()) {
const keyArr = key.split('/')
keyArr.shift() // 移除.
map[keyArr.join('.').replace(/\.js$/g, '')] = context(key)
}
return map
}
export default importAll使用
import importAll from '$common/importAll'
export default importAll(require.context('./', true, /\.js$/))参考：https://zhuanlan.zhihu.com/p/59564277
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-11-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
