記錄require.context()使用方法及項目實戰

require.context() 是什麼

require.context(directory, useSubdirectories = false, regExp = /^\.\//)
複製代碼

require.context()是能夠用來建立本身（模塊）上下文的方法，有3個參數：

• directory：要搜索的文件夾目錄
• useSubdirectories：是否還應該搜索它的子目錄
• regExp：一個匹配文件的正則表達式

//（建立了）一個包含了 test 文件夾（不包含子目錄）下面的、全部文件名以 `.test.js` 結尾的、能被 require 請求到的文件的上下文。
require.context("./test", false, /\.test\.js$/);
 
//（建立了）一個包含了父級文件夾（包含子目錄）下面，全部文件名以 `.stories.js` 結尾的文件的上下文。
require.context("../", true, /\.stories\.js$/);

複製代碼

關於require.context的返回值：一個函數

這個函數能夠接收一個參數：request，這個request是指在require()語句中的表達式，直接調用該方法能夠獲得對應模塊； 另外，函數也是對象，該函數有3個屬性： resolve, keys, id。

• resolve：是一個函數，它返回請求被解析後獲得的模塊 id。
• keys：也是一個函數，它返回一個數組，由全部可能被上下文模塊處理的請求組成。
• id：是上下文模塊裏面所包含的模塊 id. 它可能在你使用 module.hot.accept 的時候被用到

項目中使用

（又要去趕項目了，先把用法記錄下來）

如在vue項目中的store/modules下有多個模塊

const context = require.context('./modules', false, /\.js$/)

// 要跳過的模塊
const excludes = ['index', 'base']
const modules = context.keys().reduce((m, k) => {
  const name = k.slice(2, -3)
  if (!excludes.includes(name)) {
    m[name] = context(k).default
  }
  return m
}, {})

export default modules

複製代碼

注意

因爲本身學藝不精，對於這個require學習不到位，致使後來在用mpvue作小程序項目的時候碰壁了，一樣是上面這段代碼，在基於mpvue的項目中卻一直報 require.context is not a function，具體緣由如今不明白，猜想應該是webpack的問題，正在學習，有知道的大神能夠指教下。

臨時找了個解決方法：安裝require-context這個依賴，而後代碼修改以下：

const requireContext = require('require-context')
const path = require('path')

const context = requireContext(path.join(__dirname, './routes'), false, /\.js$/)
const routes = context.keys().reduce((rt, k) => {
  rt = rt.concat(context(k))
  return rt
}, [])
module.exports = routes

複製代碼

這裏是想把路由文件統一加載進來，用法跟加載路由同樣。