高級Vue前端技巧之require.context

需求

在用vue開發的過程當中，咱們可能會使用import引入文件，但須要引入多個的時候就會變得繁瑣起來，這時咱們能夠使用require.context去動態引入多個文件。

stackoverflow上的解釋很是明確：

require.context is a special feature supported by webpack's compiler that allows you to get all matching modules starting from some base directory. The intention is to tell webpack at compile time to transform that expression into a dynamic list of all the possible matching module requests that it can resolve, in turn adding them as build dependencies and allowing you to require them at runtime.

In short, you would use require.context in the exact same situation when in Node.js at runtime you would use globs to dynamically build a list of module paths to require. The return value is a callable object that behaves like require, whose keys contain the necessary module request data that can be passed to it as an argument to require the module.

There are several ways you can use it, but I think the two most common use cases are to either automagically require some well-known kind of modules (e.g. you just add some.test.js test module and in some module you use require.context to dynamically discover all the tests, thus not having to document and remember to do it manually every time you add a new test module) or to load static assets in the repository to emit files to the build output (new webpack users coming from other build tools are usually surprised that their images, fonts, audio files and other assets do not appear in the output unless they are required from some module).

注意上面提到的「多個文件」並不要求特定類型的文件，所以，這個工具是很是有用的。在開發SPA前端過程當中，常常須要以下圖所示的任務，即把使用大量的import把子組件注入到一個視圖中：

此時，逐個導入費力並且容易出問題，特別是在需求不斷變化時。

require.context方案

require.context語法

require.context(directory, useSubdirectories, regExp)
【參數含義】

• directory: 要查找的文件路徑
• useSubdirectories: 是否查找子目錄
• regExp: 要匹配文件的正則

因而，針對上圖中須要使用Import加載大量文件的需求（項目中可能還會存在不少相似需求），能夠使用以下方案來簡化：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  '@/components/base', true, /\.vue$/,
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')),
  )
  // 註冊組件，傳入一個擴展過的構造器or 對象
  Vue.component(`Base${componentName}`, componentConfig.default || componentConfig)
})

上面代碼的整體功能描述是：

• 使用 require.context查詢並把符合條件的結果文件名加入到一個鍵-值對形式的對象 requireComponent中
• 調整對象中各文件名格式
• 註冊成Vue子組件（使用Vue.component）

引用

• https://developpaper.com/in-depth-understanding-of-the-requirement-context-of-webpack/#:~:text=Require.context%20is%20actually%20a%20very%20practical%20API.%20But,which%20is%20very%20flexible%20and%20powerful%20%28recursive%20directory%29.
• https://stackoverflow.com/questions/54059179/what-is-require-context
• http://www.javashuo.com/article/p-rokrefvs-ms.html
• https://www.jianshu.com/p/1a8b2e040f08
• https://blog.csdn.net/qq_28458369/article/details/100921034