Dynamische erfordern in Webpack

Question

Ich habe Verzeichnis mit Dateien.

/web/public/js/Kern

Mein Kern Ordner bestehen: Module, Helfer, Config, styl, core.js, base.js, service.js.

Ich benutze Webpack für Build und in meinem service.js verwende ich dynamische erfordern.

Zum Beispiel:

config.js

export default { 
    modules: { 
     validation: 'validation', 
     async: 'asyncLoadContent', 
     carousel: 'carousel', 
     tab: 'tab', 
     accordeon: 'accordeon', 
     modal: 'modal', 
     lightbox: 'lightbox', 
     zoom: 'zoom', 
     notification: 'notification', 
     slider: 'slider', 
     rates: 'rates' 
    }, 
    helper: { 
     event: 'event', 
     css: 'css', 
     error: 'error', 
     transition: 'transition' 
    } 

} 

service.js In dieser Datei erhalte ich das JSON-Objekt aus der Konfigurationsdatei gehe ich durch sie rekursiv und den Pfad bilden das Modul zum Laden oder Helfer. Dementsprechend befinden sich die Module entlang des Pfades/core/helper und die Module entlang des Pfades/core/modules, dh die Verzeichnisse sind unterschiedlich und der Pfad ist dynamisch.

registrationModule(config, option){ 

     for(let key in config){ 

      if(typeof config[key] == 'object' && !this.classes[key]){ 
       this.classes[key] = {}; 
       this.registrationModule(config[key], key); 
      } else { 

       let url = (option == 'modules') ? option + '/' + key + '/' + config[key] : option + '/' + config[key]; 

       //!!!!! PROBLEM !!!!!!!/ 
       let module = require("./" + url + '.js').default; 

       this.setModule(key, option, module); 
      } 

     } 

    } 

Vor build Ich habe Warnung

WARNING in ./web/public/js/core ^\.\/.*\.js$ 
Module not found: Error: a dependency to an entry point is not allowed 
@ ./web/public/js/core ^\.\/.*\.js$ 

Und in Build ich sehe:

var map = { 
     "./base.js": 24, 
     "./config/config.js": 26, 
     "./helper/css.js": 30, 
     "./helper/error.js": 27, 
     "./helper/event.js": 31, 
     "./helper/transition.js": 32, 
     "./modules/accordeon/accordeon.js": 33, 
     "./modules/accordeon/accordeon.md.js": 34, 
     "./modules/async/asyncLoadContent.js": 35, 
     "./modules/carousel/carousel.js": 36, 
     "./modules/carousel/carousel.md.js": 37, 
     "./modules/lightbox/lightbox.js": 38, 
     "./modules/lightbox/lightbox.md.js": 39, 
     "./modules/lightbox/lightbox.view.js": 40, 
     "./modules/modal/modal.js": 41, 
     "./modules/modal/modal.md.js": 42, 
     "./modules/modal/modal.view.js": 43, 
     "./modules/notification/notification.js": 44, 
     "./modules/notification/notification.md.js": 45, 
     "./modules/rates/rates.js": 46, 
     "./modules/rates/rates.md.js": 47, 
     "./modules/slider/slider.js": 48, 
     "./modules/slider/slider.md.js": 49, 
     "./modules/tab/tab.js": 50, 
     "./modules/tab/tab.md.js": 51, 
     "./modules/validation/validation.js": 52, 
     "./modules/validation/validation.md.js": 53, 
     "./modules/zoom/zoom.js": 54, 
     "./modules/zoom/zoom.md.js": 55, 
     "./modules/zoom/zoom.view.js": 56, 
     "./service.js": 25 
    }; 

Karte bestehen aus:“./base.js ": 24" ./service .js ": 25.

Ich verstehe von welchem ​​Fehler in der Konsole, aber wie man es behebt? Wie kann ich das webpack so verstehen, dass es nur auf die Weise nach Dateien sucht, die ich möchte, wenn ich den Pfad dynamisch formiere?

Answer 1

In diesem speziellen Fall sollten Sie in der Lage sein, dies mit Code zu umgehen, der Webpack klarstellt, dass Sie nur an Helfern und Modulen interessiert sind, z.

let module; 
if (option === "modules") { 
    module = require("./modules/" + key + '/' + config[key] + '.js'); 
} else if (option === "helper") { 
    module = require("./helper/" + key + '.js'); 
} else { 
    throw new Error("Unexpected option value;"); 
} 

this.setModule(key, option, module.default); 

weil die require Anrufe ein bestimmtes Präfix haben, die Webpack abholen kann, wird es wissen, dass Sie nicht über die Root-Level-Dateien kümmern.

Beachten Sie jedoch, dass die Erstellung einer benutzerdefinierten Registrierung Ihre Abhängigkeitsgrafik sehr schwer nachvollziehbar macht und das Arbeiten mit Code wie dieser wirklich ärgerlich macht.