Specific usage of import.meta.glob in vite

Specific usage of import.meta.glob in vite

In Vite, import.meta.globthe specific usage of a method can be divided into two steps:

1. define path pattern

First, a path pattern needs to be defined to match the modules that need to be imported. This pattern can use *or **wildcards, or use an exclamation mark !to invert. For example, here are some common path patterns:

• Match all .jsfiles :./path/*.js
• Match all .vuefiles :./path/**/*.vue
• Exclude a file in a folder:./path/!(*.md)

It should be noted that the wildcards and inversion symbols in the path pattern can only appear at the end of the path, and cannot appear in the middle or the beginning of the path.

1. Call the import.meta.glob method

After defining the path pattern, you can call import.meta.globthe method to import the matched modules. This method returns an object, where each key is a matched module path, and each value is an asynchronous loading function for dynamically importing the corresponding module.

For example, here import.meta.glob's .jsan example of using to import all files in a directory:

const modules = import.meta.glob('./path/*.js')

for (const path in modules) {
    
    
  const module = await modules[path]()
  // 在这里处理导入的模块
}

In the above code, import.meta.globthe method , and all matched module paths are stored in modulesthe object. Then, for...inloop modulesall the keys in the object, call the corresponding asynchronous loading function for each module path, and finally process the imported module after loading is complete.

It should be noted that import.meta.globthe method is currently an experimental function, and there may be some compatibility issues and instability. Also, since this method returns an object, extra care needs to be taken when handling the match results to avoid unexpected errors.

Configuration of {eager: true}

In Vite, import.meta.globin the object returned by the method, each key is the matched module path, and each value is an asynchronous loading function for dynamically importing the corresponding module. By default, these asynchronous loading functions are executed on demand, that is, they are only executed when the corresponding modules are really needed. This behavior is called "lazy import".

However, in some cases, it may be necessary to preload all matching modules when the application is loaded, so as to speed up the startup speed of the application. To achieve this, path patterns can be appended {eager: true}to indicate "eager import" of all matching modules.

For example, the following code uses import.meta.glob to eager import all .js files in a directory:

const modules = import.meta.globEager('./path/*.js')

for (const path in modules) {
    
    
  const module = modules[path]
  // 在这里处理导入的模块
}

In the above code, import.meta.globEagerthe method instead import.meta.globto eagerly import all matching modules. This method returns an object where each key is a matched module path and each value is a corresponding module object.

It should be noted that eager import will increase the initial loading time and resource consumption of the application, so it is recommended to use it only when necessary. In addition, when {eager: true}using eager import, the inverse selection function in the path mode is not supported, that is, the exclamation mark !is invalid.