小技巧之require.context的使用

01

前 言

在项目开发中，经常需要import或者export各种模块

经常会这样引入组件：

代码语言：javascript复制

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

语法：

代码语言：javascript复制

require.context(directory, useSubdirectories, regExp)

1. directory: 要查找的文件路径
2. useSubdirectories: 是否查找子目录
3. regExp: 要匹配文件的正则

用法：

代码语言：javascript复制

require.context('./components/', true, /.js$/)

看下keys是作用

代码语言：javascript复制

const ctx = require.context('./components/', true, /.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]

其实就是

代码语言：javascript复制

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组件呢？

代码语言：javascript复制

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

优化的公共方法

可以优化一下，生成一个公共的方法

代码语言：javascript复制

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

使用

代码语言：javascript复制

import importAll from '$common/importAll'
export default importAll(require.context('./', true, /.js$/))

参考：https://zhuanlan.zhihu.com/p/59564277

export import key regexp require

0 人点赞