最近项目中用到了vue-element-admin当作框架,当中有一个很好的例子:封装了一个svg的组件,其中就是用到了require.context,然后就出查了相关的介绍,当时也是一头雾水,最后决定弄明白这个东西。

  | 看下webpack官方的介绍:

 

require.context 点击打开链接

You can create your own context with the require.context() function.

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

webpack parses for require.context() in the code while building.

The syntax is as follows:

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

Examples:

require.context("./test", false, /\.test\.js$/);
// a context with files from the test directory that can be required with a request endings with `.test.js`.
require.context("../", true, /\.stories\.js$/);
// a context with all files in the parent folder and descending folders ending with `.stories.js

 

    啥意思呢,就是说啊,这玩意的目的啊就是为了省事,通常我们可能会在多个页面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文件都引入到项目中了。

 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐