使用require.context實現(xiàn)前端工程自動化

require.context是什么

一個webpack的api,通過執(zhí)行require.context函數(shù)獲取一個特定的上下文,主要用來實現(xiàn)自動化導入模塊,在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然后自動導入,使得不需要每次顯式的調用import導入模塊

什么時候需要用到require.context

在vue寫的項目中,我把路由通過不同的功能劃分成不同的模塊,在index.js中一個個導入,隨著項目越來越大,結構越來越復雜,每次都得手動import就很是令人煩躁
這個時候我們可以使用require.context函數(shù)遍歷modules文件夾的所有文件一次性導入到index.js中。

require.context參數(shù)說明

require.context函數(shù)接受三個參數(shù)

1. directory {String} -讀取文件的路徑
2. useSubdirectories {Boolean} -是否遍歷文件的子目錄
3. regExp {RegExp} -匹配文件的正則

//例如require.context('./modules', false, /.test.js$/)/*上面的代碼遍歷當前目錄下的modules文件夾的所有.js結尾的文件,不遍歷子目錄就像這樣 */router                           // 路由文件夾  |__index.js                    // 總入口,這里做一些自動化處理  |__common.js                   // 通用路由：聲明通用路由  |__modules                     // 業(yè)務邏輯模塊：所以的業(yè)務邏輯模塊        |__b.js                 // 業(yè)務模塊b        |__home.js               // 業(yè)務模塊home：業(yè)務模塊        |__a.js                  // 業(yè)務模塊a  

在index.js中調用?require.context('./modules', false, /.js$/);會得到modules文件下3個文件的執(zhí)行環(huán)境。

值得注意的是require.context函數(shù)執(zhí)行后返回的是一個函數(shù),并且這個函數(shù)有3個屬性

1. resolve {Function} -接受一個參數(shù)request,request為modules文件夾下面匹配文件的相對路徑,返回這個匹配文件相對于整個工程的相對路徑

2. keys {Function} -返回匹配成功模塊的名字組成的數(shù)組

3. id {String} -執(zhí)行環(huán)境的id,返回的是一個字符串,主要用在module.hot.accept,應該是熱加載?

這三個都是作為函數(shù)的屬性(注意是作為函數(shù)的屬性,函數(shù)也是對象,有對應的屬性)

廢話不多說 直接上代碼,看看怎么用

index.js自動化文件中這么寫

const files = require.context('./modules', false, /\.js$/)
console.log(files.keys()) // ["./home.js"] 返回一個數(shù)組let configRouters = []/*** inject routers*/files.keys().forEach(key => {  configRouters = configRouters.concat(files(key).default) // 讀取出文件中的default模塊})export default configRouters // 拋出一個vue-router期待的結構的數(shù)組

業(yè)務模塊中這樣寫

import Frame from '@/views/frame/Frame'import Home from '@/views/index/index'export default [    // 首頁    {      path: '/index',      name: '首頁',      redirect: '/index',      component: Frame,       children: [ // 嵌套路由        {          path: '',          component: Home        }      ]    }]

大功告成!!!!

本文完?