Verwenden von Webpack zum Laden aufschlussreicher Modulmustermodule und deren Verwendung global und als es6-Module

Question

Ich plane die Migration einer großen Browseranwendung mit globalen Modulen, die mit dem aufschlussreichen Modulmusterdesign zu es6-Modulen mit webpack und babel entworfen wurden und möchten mach das schrittweise.

Lassen Sie uns ein globales Script-Modul wie folgt annehmen:

var myModule = (function(window, undefined) { 
    function myMethod() { 
    console.log('myMethod'); 
    } 
    return { 
    myMethod: myMethod 
    }; 
})(window); 

Die ursprüngliche Codebasis des Moduls durch Laden laden würde ein Skript-Tag verwenden und es dann als globale verwenden:

myModule.myMethod(); 

Der neue Code sollte das Modul wie folgt konsumieren:

import myModule from './myModule.js'; 

Anstatt alles zu ändern Ich suche nach einem Weg, das Modulformat zunächst beizubehalten, aber als globales Skriptmodul und es6-Modul zu verwenden.

Answer 1

Wow, es ist super einfach im Webpack. Vielleicht bin ich es, aber ich brauchte eine Weile, um die Dokumentation des Webpacks zu verstehen.

Dies ist, wie es gemacht wird:

des Laders Exporte Installieren

npm install exports-loader --save 

Mit den Ausfuhren loader

import myModule from 'exports?myModule!./myModule.js'; 

Wo myModule zwischen in der Abfrage (kurz vor der !) ist eigentlich der Name der Variable, die wir in der Zeile var myModule = (function(window, undefined) { der Rückgabe von der Funktion zugewiesen haben.