web-dev-qa-db-fra.com

Impossible d'accéder à la fonction fournie par WebPack

J'ai une webapp très simple où WebPack regroupe le javascript dans un fichier bundle.js qui est utilisé par diverses pages html.

Malheureusement, même si je spécifie dans le fichier de configuration du webpack que je veux l'utiliser comme bibliothèque autonome (libraryTarget et library) qui peut être utilisée par une balise de script, cela ne fonctionne pas. Tout semble être encapsulé dans le module donc mes fonctions ne sont pas disponibles.

index.html

<!DOCTYPE html>
<html lang="EN">
<head>
    <title>Play! Webpack</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
    <body>
    <app>
        Loading...
    </app>
    <script type="text/javascript" src="/bundles/bundle.js" charset="utf-8"></script>
    <button type="button" onclick="ui.helloWorld()">Click Me!</button>
    </body>
</html>

section d'entrée et de sortie de mon webpack.base.config.js

entry: [
        './app/main.js'
    ],
    output: {
        path: buildPath,
        filename: 'bundle.js',
        sourceMapFilename: "bundle.map",
        publicPath: '/bundles/',
        libraryTarget: 'var',
        library: 'ui'
    },

main.js (point d'entrée)

function helloWorld() {
    alert( 'Hello, world!' );
}

En cliquant sur mon bouton, je reçois cette erreur dans la console:

Uncaught TypeError: ui.helloWorld is not a function
    at HTMLButtonElement.onclick (localhost/:14)

Pour des informations supplémentaires, le contenu de mon fichier bundle.js ressemble à ceci:

var ui = ...

(stuff here)

function(module, exports, __webpack_require__) {

    __webpack_require__(79);

    function helloWorld() {
        alert('Hello, world!');
    }

/***/ }
javascriptmodulewebpack
19
Jean-François Côté

L'objet ui exporté par la bibliothèque intégrée est le même que l'objet exporté du module d'entrée. Si vous n'exportez pas explicitement une fonction d'un module dans le webpack, elle ne sera définie que dans la portée de ce module (qui est l'une des principales fonctionnalités des modules JavaScript). Vous devez l'assigner au module.exports objet pour pouvoir y accéder depuis l'extérieur du module:

/** main.js **/

function helloWorld() {
    alert( 'Hello, world!' );
}

// module.exports here (in the entrypoint module) is the same object
// as ui in the page's scope (outside webpack)
module.exports = {
  helloWord: helloWorld,
};

Ensuite, vous pouvez y accéder à partir de vos autres scripts:

<script>
  ui.helloWorld(); // 'ui.helloWorld' is the same as
                   // 'module.exports.helloWorld' above
</script>

Si vous ne définissez pas explicitement module.exports dans le module d'entrée, il sera par défaut un objet vide { }.

18
Frxstrem