# require.context()的用法 vue项目中 使用require.context()实现前端工程化引入文件 require.context(directory, useSubdirectories, regExp, mode = 'sync') - **directory**:表示检索的目录 - **useSubdirectories**：表示是否检索子文件夹 - **regExp**:匹配文件的正则表达式,一般是文件名 - **mode**:加载模式，同步/异步 ## 2.用来在组件内引入多个组件 ``` <pre class="calibre13">``` <span class="token6">// 从@/components/home目录下加载所有.vue后缀的组件</span> <span class="token2">const</span> files <span class="token">=</span> require<span class="token1">.</span><span class="token3">context</span><span class="token1">(</span><span class="token4">'@/components/home'</span><span class="token1">,</span> <span class="token5">false</span><span class="token1">,</span> <span class="token7">/\.vue$/</span><span class="token1">)</span><span class="token1">;</span> <span class="token2">const</span> components <span class="token">=</span> <span class="token1">{</span><span class="token1">}</span><span class="token1">;</span> <span class="token6">// 遍历files对象，构建components键值</span> files<span class="token1">.</span><span class="token3">keys</span><span class="token1">(</span><span class="token1">)</span><span class="token1">.</span><span class="token3">forEach</span><span class="token1">(</span>key <span class="token">=></span> <span class="token1">{</span> components<span class="token1">[</span>key<span class="token1">.</span><span class="token3">replace</span><span class="token1">(</span><span class="token7">/(\.\/|\.vue)/g</span><span class="token1">,</span> <span class="token4">''</span><span class="token1">)</span><span class="token1">]</span> <span class="token">=</span> <span class="token3">files</span><span class="token1">(</span>key<span class="token1">)</span><span class="token1">.</span><span class="token2">default</span> <span class="token1">}</span><span class="token1">)</span><span class="token1">;</span> <span class="token2">export</span> <span class="token2">default</span> <span class="token1">{</span> <span class="token">...</span> components<span class="token1">,</span> <span class="token6">// ES6语法糖，代表 components: components,</span> <span class="token">...</span> <span class="token1">}</span> ``` ``` ``` <pre class="calibre14">``` <span class="token2">const</span> modulesFiles <span class="token">=</span> require<span class="token1">.</span><span class="token3">context</span><span class="token1">(</span><span class="token4">'./modules'</span><span class="token1">,</span> <span class="token5">true</span><span class="token1">,</span> <span class="token7">/\.js$/</span><span class="token1">)</span> <span class="token6">// you do not need `import app from './modules/app'`</span> <span class="token6">// it will auto require all vuex module from modules file</span> <span class="token2">const</span> modules <span class="token">=</span> modulesFiles<span class="token1">.</span><span class="token3">keys</span><span class="token1">(</span><span class="token1">)</span><span class="token1">.</span><span class="token3">reduce</span><span class="token1">(</span><span class="token1">(</span>modules<span class="token1">,</span> modulePath<span class="token1">)</span> <span class="token">=></span> <span class="token1">{</span> <span class="token6">// set './app.js' => 'app'</span> <span class="token2">const</span> moduleName <span class="token">=</span> modulePath<span class="token1">.</span><span class="token3">replace</span><span class="token1">(</span><span class="token7">/^\.\/(.*)\.\w+$/</span><span class="token1">,</span> <span class="token4">'$1'</span><span class="token1">)</span> <span class="token2">const</span> value <span class="token">=</span> <span class="token3">modulesFiles</span><span class="token1">(</span>modulePath<span class="token1">)</span> modules<span class="token1">[</span>moduleName<span class="token1">]</span> <span class="token">=</span> value<span class="token1">.</span><span class="token2">default</span> <span class="token2">return</span> modules <span class="token1">}</span><span class="token1">,</span> <span class="token1">{</span><span class="token1">}</span><span class="token1">)</span> ``` ```