require.context

在element-admin项目中，有个icons目录，里面有个index.js文件，有这样一段代码：

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

初看不动，百度了下，才明白这玩意的目的啊就是为了省事，通常我们可能会在多个页面require 同一个组件，数量少还行，多了的话就很蛮烦，维护起来也费劲。这个时候require.context 就排上用场了，一次性引入。

| 首先介绍下入参 ：

    1. 你要引入文件的目录
    2.是否要查找该目录下的子级目录
    3.匹配要引入的文件

| 返回值是一个function：

function webpackContext(req) {
    return __webpack_require__(webpackContextResolve(req));
}

    这个function有三个属性：resolve 、keys、id

    · resolve: 是一个函数，他返回的是被解析模块的id
    · keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成
    · id：上下文模块的id

| 用法：
    拿该目录为例


    要引入svg下面所有的svg文件：
    在该文件（icons）目录下新建一个js文件index.js 写如下代码：

let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context('./svg', false, /\.svg$/)
requireAll(req)

    我们只需要将改index.js 引入，就可以将svg目录下所有的svg文件都引入到项目中了。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！