Exporter et regrouper une fonction à l'aide de webpack et l'appeler dans une balise de script html

Dec 15 2020

J'ai essayé quelque chose de très simple - exporter et regrouper (et transpiler babel) une fonction à l'aide de webpack, puis l'appeler dans la balise de script de ma page html.

sample.js - qui est fourni à l'aide de webpack

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

Configuration Webpack (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
    }

Je pensais que c'était aussi simple que d'ajouter les cibles libraryet libraryTargetà la configuration de Webpack et que je devrais alors pouvoir appeler ma fonction MyLibrary.sampleFunctionExported1().

Mais lorsque je le fais MyLibrarydans la console de mon navigateur, il s'affiche comme ci-dessous et MyLibrary.sampleFunctionExported1()renvoie une ... is not a functionerreur

J'ai suivi les suggestions dans plusieurs de ces questions / réponses: réponse 1 , réponse 2 , réponse 3 et divers autres articles de blog, mais cela ne fonctionne pas du tout pour moi.

Donc, après avoir passé tant de temps, je la poste ici en espérant que quelqu'un puisse m'aider à comprendre ce qui ne va pas.

Edit 1: Voici le fichier généré après le regroupement du webpack : /public/js/sample.js

PS - Ignorez le entry2.jsfichier car c'est un fichier vide, je viens de l'ajouter pour afficher ma configuration et parce que je ne suis pas sûr si le fait d'avoir plusieurs points d'entrée peut causer ce problème auquel je suis actuellement confronté.

Réponses

1 Jacob Dec 15 2020 at 03:21

En raison de la façon dont vous exportez:

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

... votre MyLibraryvariable va avoir la forme:

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

Si vous voulez plutôt qu'il ait la forme:

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

... vous devez effectuer une exportation nommée au lieu d'une exportation par défaut:

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