Eksportowanie i pakowanie funkcji przy użyciu pakietu webpack i wywoływanie jej wewnątrz tagu skryptu html

Dec 15 2020

Próbowałem czegoś bardzo prostego - eksportuj i pakuj (i transpiluj babel) funkcję za pomocą webpacka, a następnie wywołuj ją w tagu skryptu mojej strony html.

sample.js - który jest dostarczany za pomocą pakietu webpack

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

Konfiguracja pakietu WebPack (wersja = 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
    }

Pomyślałem, że było to tak proste, jak dodanie celów libraryi libraryTargetdo konfiguracji pakietu webpack, a następnie powinienem być w stanie wywołać moją funkcję jako MyLibrary.sampleFunctionExported1().

Ale kiedy robię to MyLibraryw konsoli przeglądarki, wyświetla się jak poniżej i MyLibrary.sampleFunctionExported1()zwraca ... is not a functionbłąd

Postępowałem zgodnie z sugestiami w wielu z tych pytań / odpowiedzi: odpowiedź 1 , odpowiedź 2 , odpowiedź 3 i różne inne posty na blogu, ale w ogóle mi to nie odpowiada.

Dlatego po spędzeniu tak dużo czasu zamieszczam to tutaj, mając nadzieję, że ktoś pomoże mi zrozumieć, co jest nie tak.

Edycja 1: Oto plik wygenerowany po pakowaniu pakietu internetowego: /public/js/sample.js

PS - Zignoruj entry2.jsplik, ponieważ jest to pusty plik, po prostu dodałem go, aby pokazać moją konfigurację i ponieważ nie jestem pewien, czy posiadanie wielu punktów wejścia może spowodować ten problem, z którym mam obecnie do czynienia.

Odpowiedzi

1 Jacob Dec 15 2020 at 03:21

Ze względu na sposób eksportu:

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

... Twoja MyLibraryzmienna będzie miała kształt:

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

Jeśli zamiast tego chcesz, aby miał kształt:

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

... musisz wykonać nazwany eksport zamiast domyślnego eksportu:

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