# 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> ``` ```