demand

In the process of developing with vue, we may use import to import files, but it becomes cumbersome when we need to import multiple files. At this time, we can use require.context to dynamically import multiple files.

The explanation on stackoverflow is very clear:

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).

Note that the "multiple files" mentioned above does not require a specific type of file, so this tool is very useful. In the process of developing the SPA front-end, the task shown in the following figure is often required, that is, injecting subcomponents into a view using a large number of imports:

At this time, importing one by one is laborious and prone to problems, especially when the requirements are constantly changing.

require.context scheme

require.context syntax

require.context(directory, useSubdirectories, regExp)
[Parameter meaning]

directory: file path to find
useSubdirectories: whether to find subdirectories
regExp: the regularity of the file to be matched

Therefore, in view of the need to use Import to load a large number of files in the above figure (there may be many similar requirements in the project), the following scheme can be used to simplify:

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)
})

The overall function description of the above code is:

Use require.context to query and add the qualified result file name to a key-value pair object requireComponent
Adjust the format of each file name in the object
Register as a Vue subcomponent (using Vue.component)

Advanced Vue front-end skills require.context

demand

require.context scheme

require.context syntax

Quote

Guess you like