[webpack]使用webpack的require.context实现批量导入ES模块

1,416 阅读1分钟

什么是webpack的require.context

require.context: 是webpack提供的一个接口,可以构建自己的上下文。

什么时候用?

当一个js里面需要手动引入过多的其他文件里面的文件时,就可以使用。

参数和返回值

返回值是对象类型。因为可以使用对象的.keys()方法 可以给这个函数传入三个参数:一个要搜索的目录,一个标记表示是否还搜索其子目录, 以及一个匹配文件的正则表达式。 语法如下: require.context(directory, useSubdirectories = false, regExp = /^\.\//); 例如:


//useSubdirectories = false
require.context('./test', false, /\.test\.js$/);
(创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。

//useSubdirectories = true
require.context('../', true, /\.stories\.js$/);
(创建出)一个 context,其中所有文件都来自父文件夹及其所有子级文件夹,request 以 `.stories.js` 结尾。

实际应用:

场景1 : 写测试文件时,需要index.js里面引入多个预先定义好spec文件夹下面,多个以.spec.js结尾的js文件, element UI test里面就是这么干的

场景2 : 上面引入了js文件,那举一反三,是不是也可以批量引入vue或者react文件?当然可以,而且上面不要求顺序,如果要求的是引入多个数组,并且引入后仍然能保证数组导出时的顺序,可以导出前给每项加一个表明顺序的属性,再导入后判断即可。参考这里

小结

  • 使用require.context可以实现自动导入ES模块
  • 带着目的多看源码,善于站在巨人的肩膀上,善于使用工具函数,例如webpack的require.context
  • 技术不是目的,目的是用技术解决实际的问题
  • 学好英语!!!