原文地址
使用require.context實作前端工程自動化
require.context是什么
一個webpack的api,通過執行require.context函式獲取一個特定的背景關系,主要用來實作自動化匯入模塊,在前端工程中,如果遇到從一個檔案夾引入很多模塊的情況,可以使用這個api,它會遍歷檔案夾中的指定檔案,然后自動匯入,使得不需要每次顯式的呼叫import匯入模塊
什么時候需要用到require.context
在Vue寫的專案中,我把路由通過不同的功能劃分成不同的模塊,在index.js中一個個匯入,隨著專案越來越大,結構越來越復雜,每次都得手動import就很是令人煩躁
這個時候我們可以使用require.context函式遍歷modules檔案夾的所有檔案一次性匯入到index.js中
require.context引數說明
require.context函式接受三個引數
- directory {String} -讀取檔案的路徑
- useSubdirectories {Boolean} -是否遍歷檔案的子目錄
- regExp {RegExp} -匹配檔案的正則
//例如
require.context('./modules', false, /.test.js$/)
/*
上面的代碼遍歷當前目錄下的modules檔案夾的所有.js結尾的檔案,不遍歷子目錄
就像這樣
*/
router // 路由檔案夾
|__index.js // 總入口,這里做一些自動化處理
|__common.js // 通用路由：宣告通用路由
|__modules // 業務邏輯模塊：所以的業務邏輯模塊
|__b.js // 業務模塊b
|__home.js // 業務模塊home：業務模塊
|__a.js // 業務模塊a
在index.js中呼叫 require.context('./modules', false, /.js$/);會得到modules檔案下3個檔案的執行環境
值得注意的是require.context函式執行后回傳的是一個函式,并且這個函式有3個屬性
- resolve {Function} -接受一個引數request,request為modules檔案夾下面匹配檔案的相對路徑,回傳這個匹配檔案相對于整個工程的相對路徑
- keys {Function} -回傳匹配成功模塊的名字組成的陣列
- id {String} -執行環境的id,回傳的是一個字串,主要用在module.hot.accept,應該是熱加載?
這三個都是作為函式的屬性(注意是作為函式的屬性,函式也是物件,有對應的屬性)
廢話不多說 直接上代碼,看看怎么用
index.js自動化檔案中這么寫
const files = require.context('./modules', false, /\.js$/)
console.log(files.keys()) // ["./home.js"] 回傳一個陣列
let configRouters = []
/**
* inject routers
*/
files.keys().forEach(key => {
configRouters = configRouters.concat(files(key).default) // 讀取出檔案中的default模塊
})
export default configRouters // 拋出一個Vue-router期待的結構的陣列
業務模塊中這樣寫
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
}
]
}
]
大功告成!!!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/242276.html
標籤：JavaScript
上一篇：js常用方法封裝
下一篇：如何根據key合并陣列中的物件