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)
用法:
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