美文网首页
webpack之require.context

webpack之require.context

作者: 星球小霸王 | 来源:发表于2019-01-23 11:32 被阅读0次

    require.context

    官方文档指出
    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.

    意思是它允许你通过一个目录进行搜索,flag指定是否搜索子目录,以及与文件匹配的正则表达式。

    也就是说 require.context 有三个参数:

    • directory:说明需要检索的目录
    • useSubdirectories:是否检索子目录
    • regExp: 匹配文件的正则表达式

    examples:

    require.context('./test', false, /\.test\.js$/);
    

    context module API

    官方文档指出
    A context module exports a (require) function that takes one argument: the request.
    The exported function has 3 properties: resolve, keys, id.
    resolve is a function and returns the module id of the parsed request.
    keys is a function that returns an array of all possible requests that the context module can handle.
    id is the module id of the context module. This may be useful for module.hot.accept

    意思是该上下文到处一个必须的函数,并且这个函数接受一个请求的参数.
    导出的函数有3个属性:resolve、keys和id.

    • resolve是一个函数,返回解析请求的模块ID。
    • keys是一个函数,返回上下文模块可以处理的所有可能请求的数组.
    • id是上下文模块的模块ID。 这可能对module.hot.accept有用
    var cache = {};
    
    function importAll (r) {
      r.keys().forEach(key => cache[key] = r(key));
    }
    
    importAll(require.context('../components/', true, /\.js$/));
    
    例如导出当前目录文件下的所有js文件并且不包含该index.js文件

    首先创建两个测试文件index.js和test.js

    //index.js
    
    var cache = {};
    
    function importAll (r) {
      r.keys().forEach(key => {
        if(key === './index.js') return
        cache[key] = r(key).defalut
      });
    }
    
    importAll(require.context('.', false, /\.js$/));
    
    console.log(cache) //可以看下cache现在是什么样子
    export default cache
    

    相关文章

      网友评论

          本文标题:webpack之require.context

          本文链接:https://www.haomeiwen.com/subject/wpdjjqtx.html