vue如何利用require.context去獲取項目目錄信息

這篇文章主要介紹vue如何利用require.context去獲取項目目錄信息，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

利用 require.context 去獲取項目目錄信息

關(guān)于 require.context，webpack 文檔是這么描述的：

可以給這個函數(shù)傳入三個參數(shù)：一個要搜索的目錄，一個標記表示是否還搜索其子目錄， 以及一個匹配文件的正則表達式。
webpack 會在構(gòu)建中解析代碼中的 require.context() 。如果想引入一個文件夾下面的所有文件，或者引入能匹配一個正則表達式的所有文件，這個功能就會很有幫助

根據(jù)這個提示，我們可以引用到一個文件夾下面的所有文件，由此可以利用獲取的文件信息去做一些操作，比如在注冊組件的時候，原本我們注冊組件的時候需要一個個引入并且一個個注冊，而且后面想加新的，又要再寫上，現(xiàn)在可以通過 require.context 去優(yōu)化這一段代碼。

// import WmsTable from './wms-table/table/index';
import Table from './table/index.vue';
import CustomHooks from './custom-hooks/custom-hooks-actions/index';
import SFilter from './s-filter/filter-form';
import WButton from './button/index';
import CreateForm from './createForm/create-form/CreateForm.vue';
import Action from './table/action-table-column.vue';
import DetailItem from './detail-item.vue';


Vue.component('w-filter', SFilter);
Vue.component('w-button', WButton);
Vue.component('custom-hooks', CustomHooks);
Vue.component('create-form', CreateForm);
Vue.component('w-table', Table);
Vue.component('w-table-action', Action);
Vue.component('zonetime-date-picker', ZonetimeDatePicker);
Vue.component('detail', DetailItem);

注冊全局組件的時候，不需要一個一個 import，和一個個去注冊，使用 require.context 可以自動導(dǎo)入模塊，這樣的好處在于，當我們新建一個組件，不用自己再去手寫注冊，而在一開始就幫我們自動完成。

const contexts = require.context('./', true, /\.(vue|ts)$/);
export default {
  install (vm) {
    contexts.keys().forEach(component => {
      const componentEntity = contexts(component).default;
      if (componentEntity.name) {
        vm.component(componentEntity.name, componentEntity);
      }
    });
  }
};

以上是“vue如何利用require.context去獲取項目目錄信息”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！