Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Hi guys, in the last article Vue, we have learned a trick to register global components so that we can register a large number of global components without being blocked by Vue.use or Vue.component. I don’t know whether the happiness of friends has been improved after watching it. If you don’t feel satisfied, will the following little skill that can even omit import make you heartbroken? What we are going to share today is a webpack API that provides us with the ability to get a specific context require.context.

require.context

  • Context is a context-specific API in Webpack. It is mainly used to automate import modules, that is, manual import is no longer required.
  • Usage scenario: if there is such a scene in the front-end engineering: from a folder and subfolders to introduce more module, can consider to use this API, it will automatically traverse folder and subfolders in the specified file, and then automatically import, every time no longer need to explicitly call the import import, sound a bit enchanted.
  • Grammatical analysis:Require.context (directory, useSubdirectories = false, regExp = /^.//) This function takes three arguments
    • Directory: string directory of the module to be imported
    • UseSubdirectories: Boolean that identifies whether subdirectories need to be explored
    • RegExp: matches the re of the file
  • The return value:The return value of this function is still a function, and this function also has three attributes.
    1. Resolve: function that accepts a parameter, req, that is the relative path of the matched files under the specified folder
    2. Keys: function that returns an array of matched filenames (module names) without arguments
    3. Id: a character string. – ID of the execution environment
  • The return value of the return value: The return value of the return value is the module information we want to import. It’s a little convoluted. For example, when we call require.context(), we return requireComponent. RequireComponent is a function. Its return value is the module information we want.

Automatic module import thinking analysis

We have already introduced the purpose, usage scenario and syntax analysis of require.context. Let’s take a look at how to use this function to achieve automatic import of modules.

  • == Note == : This function is only applicable to batch import of multiple files in one folder and subfolders, not files scattered in different folders.
  • First we need to call require.context, configure the parameters (file path, traversal of word directory, match re), and accept the return requireComponent
  • Call the requireComponent keys function and iterate over its return value
  • Execute the requireComponent function in the body of the loop, passing the traversal value as an argument and receiving the function’s return value comp (which is the module object we are importing)
  • Call Vue.com Ponent for global component registration

Code implementation

const requireComponent = require.context('./components'.true./.vue$/)// Import all. Vue files in the components directory and subdirectories
// Iterate over the matching to the module
requireComponent.keys().forEach(moduleName= >{
	const module = requireComponent(moduleName);
	Vue.component(module.default.name, module.default);
});
Copy the code

The above simple few lines of code will achieve the global registration of batch components, partners after reading no heartache, there is no full of happiness.

conclusion

In this paper, we first introduce require.context in Webpack, and detailed analysis of require.context function and usage, and finally use require.context to achieve a simple global component batch automatic registration function. We share two tips about global batch registration components, any questions welcome to comment. Like small partners welcome to praise the message plus attention oh!