Exportieren und Bündeln einer Funktion mithilfe von Webpack und Aufrufen innerhalb eines HTML-Skript-Tags

Dec 15 2020

Ich habe etwas sehr Einfaches versucht - eine Funktion mit Webpack exportieren und bündeln (und babel transpilieren) und sie dann im Skript-Tag meiner HTML-Seite aufrufen.

sample.js - wird mit dem Webpack gebündelt

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Webpack-Konfiguration (Version = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

Ich dachte, es wäre so einfach wie das Hinzufügen der libraryund libraryTargetZiele zur Webpack-Konfiguration und dann sollte ich in der Lage sein, meine Funktion als aufzurufen MyLibrary.sampleFunctionExported1().

Aber wenn ich MyLibraryin meiner Browser - Konsole, zeigt es , wie unten und MyLibrary.sampleFunctionExported1()Return - ... is not a functionFehler

Ich habe in vielen dieser Fragen / Antworten Vorschläge befolgt: Antwort 1 , Antwort 2 , Antwort 3 und verschiedene andere Blog-Beiträge, aber es funktioniert überhaupt nicht für mich.

Nachdem ich so viel Zeit verbracht habe, poste ich es hier in der Hoffnung, dass mir jemand helfen kann, zu verstehen, was falsch ist.

Bearbeiten 1: Hier ist die Datei, die nach dem Bündeln des Webpacks generiert wurde: /public/js/sample.js

PS - Ignorieren Sie die entry2.jsDatei, da es sich um eine leere Datei handelt. Ich habe sie nur hinzugefügt, um meine Konfiguration anzuzeigen. Da ich nicht sicher bin, ob mehrere Einstiegspunkte dieses Problem verursachen können, mit dem ich derzeit konfrontiert bin.

Antworten

1 Jacob Dec 15 2020 at 03:21

Aufgrund der Art und Weise, wie Sie exportieren:

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

... Ihre MyLibraryVariable wird die Form haben:

{
  default: function() { ... }
}

Wenn Sie stattdessen möchten, dass es die Form hat:

{
  sampleFunctionExported1: function() { ... }
}

... Sie müssen einen benannten Export anstelle eines Standardexports durchführen:

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}