Die rquire.context-Nutzung von Webpack realisiert Engineering-Automatisierung

Kürzlich ein Projekt imitiert, das folgende Verzeichnis, es gibt einige grundlegende Komponenten innerhalb der Basis, aber es wurde nicht global auf die normale Weise in main.js registriert, zuerst habe ich nicht verstanden, wie nicht registrierte Komponenten global verwendet werden

Projektverzeichnis

//main.js
import global from './utils/global'
Vue.use(global)
//解释:如果自动化的代码直接写在一个js文件中直接全局的引入main.js 中也是没有问题的,
//但是这里是按照自定义插件的方式写下global文件中的就要使用vue的use方法

Passen Sie das globale Plug-In an, rufen Sie es über das globale Vue.use(global) auf.

//global.js
import {
  Input,
  Dialog,
} from "element-ui"
import VueLazyload from "vue-lazyload"
import Meta from 'vue-meta'
import * as utils from "./index"

export default {
  install(Vue) {
    const requireComponent = require.context(
      "@/base",
      true,
      /[a-z0-9]+\.(jsx?|vue)$/i,
    )
    //console.log(requireComponent);
    //console.log(requireComponent.keys(),)
    //console.log(requireComponent.resolve,)
    //console.log(requireComponent.id,)
    //console.log(requireComponent.resolve("./tabs.vue"))
    //console.log(requireComponent("./tabs.vue"));
    //console.log(requireComponent("./tabs.vue") === require("@/base/tabs"));

    
    // 批量注册base组件
    requireComponent.keys().forEach(fileName => {
        const componentConfig = requireComponent(fileName)
        const componentName = componentConfig.default.name
        if (componentName) {
            Vue.component(componentName, componentConfig.default ||           
             componentConfig)
       }
    })
    
    Vue.prototype.$ELEMENT = { size: "small" }
    Vue.prototype.$utils = utils

    Vue.use(Input)
    Vue.use(Dialog)
    Vue.use(Meta)
  },
}

Analyse require.context

const requireComponent = require.context(
      "@/base",
      true,
      /[a-z0-9]+\.(jsx?|vue)$/i,
    )

require.context gibt einen Webpack-Kontext zurück, der eine Funktion
mit drei Parametern zurückgibt:

Das zu durchsuchende Ordnerverzeichnis (kann keine Variable sein, Webpack kann das Verzeichnis während der Kompilierungsphase nicht finden)

Möchten Sie sein Unterverzeichnis erneut durchsuchen?

Regulärer Ausdruck zum Abgleichen von Dateien
require.context(directory, useSubdirectories, regExp);

Zusammenfassen:

1 Das require.context-Modul gibt eine Funktion zurück, die einen Parameter akzeptieren kann.
2 Der erste Parameter von require.context kann keine Variable sein. Webpack kann das Verzeichnis während der Kompilierungsphase nicht finden.
3 Es gibt drei Attribute und Methoden, resolve , keys , id

Auflösen ist eine Funktion, der Pfad der eingehenden Datei erhält die ID des geparsten Moduls

keys ist eine Funktion, die ein Array aller Dateipfade zurückgibt

id ist die ID des im Kontext enthaltenen Moduls, kann verwendet werden, wenn module.hot.accept verwendet wird (Hot Module Update)

Diagramm

Schauen Sie sich die beiden Bilder unten für eine klarere Analyse an
require.contex.png