demanda

En el proceso de desarrollo con vue, podemos usar la importación para importar archivos, pero se volverá engorroso cuando necesitemos importar varios archivos. En este momento, podemos usar require.context para importar dinámicamente varios archivos.

La explicación sobre stackoverflow es muy clara:

require.context es una característica especial compatible con el compilador de webpack que le permite obtener todos los módulos coincidentes a partir de algún directorio base. La intención es decirle a webpack en tiempo de compilación que transforme esa expresión en una lista dinámica de todas las posibles solicitudes de módulos coincidentes que puede resolver, agregando a su vez como dependencias de compilación y permitiéndole solicitarlas en tiempo de ejecución.

En resumen, usaría require.context exactamente en la misma situación cuando en Node.js en tiempo de ejecución usaría globs para construir dinámicamente una lista de rutas de módulo para requerir. El valor de retorno es un objeto invocable que se comporta como require, cuyas claves contienen los datos de solicitud de módulo necesarios que se le pueden pasar como argumento para requerir el módulo.

Hay varias formas de usarlo, pero creo que los dos casos de uso más comunes son requerir automágicamente algunos tipos de módulos conocidos (por ejemplo, simplemente agrega un módulo de prueba some.test.js y en algún módulo que usa require. contexto para descubrir dinámicamente todas las pruebas, por lo tanto, no tener que documentar y recordar hacerlo manualmente cada vez que agrega un nuevo módulo de prueba) o cargar activos estáticos en el repositorio para emitir archivos a la salida de la compilación (nuevos usuarios del paquete web que provienen de otros Las herramientas de compilación generalmente se sorprenden de que sus imágenes, fuentes, archivos de audio y otros activos no aparezcan en la salida a menos que se requieran de algún módulo).

Tenga en cuenta que los "archivos múltiples" mencionados anteriormente no requieren un tipo específico de archivo, por lo que esta herramienta es muy útil. En el proceso de desarrollo del front-end de SPA, a menudo se requiere la tarea que se muestra en la siguiente figura, es decir, inyectar subcomponentes en una vista utilizando una gran cantidad de importaciones:

En este momento, importar uno a uno es laborioso y propenso a problemas, especialmente cuando los requisitos cambian constantemente.

require.context esquema

require.context sintaxis

require.context (directorio, useSubdirectories, regExp)
[Significado del parámetro]

directorio: ruta de archivo para encontrar
useSubdirectories: si buscar subdirectorios
regExp: la regularidad del archivo que se va a comparar

Por lo tanto, en vista del requisito de usar Importar para cargar una gran cantidad de archivos en la figura anterior (puede haber muchos requisitos similares en el proyecto), se puede usar el siguiente esquema para simplificar:

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

La descripción general de la función del código anterior es:

Utilice require.context para consultar y agregar el nombre del archivo de resultado calificado a un objeto de par clave-valor requireComponent
Ajustar el formato de cada nombre de archivo en el objeto
Regístrese como un subcomponente de Vue (usando Vue.component)

Las habilidades avanzadas de interfaz de usuario de Vue requieren contexto

demanda

require.context esquema

require.context sintaxis

Citar

Supongo que te gusta