javascript - Appeler du code empaqueté avec webpack depuis l'extérieur (balise script HTML)

Supposons que j'ai une classe comme celle-ci (écrite en TypeScript) et que je la regroupe avec Webpack dans bundle.js.

export class EntryPoint {
    static run() {
        ...
    }
}

Dans mon index.html, j'inclurai le bundle, mais ensuite, j'aimerais aussi appeler cette méthode statique.

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

Cependant, le EntryPoint n'est pas défini dans ce cas. Comment pourrais-je alors appeler le javascript regroupé depuis un autre script ?

Ajouté : fichier de configuration Webpack.

Réponse #1

Il semble que vous vouliez exposer le bundle webpack en tant que bibliothèque. Vous pouvez configurer webpack pour exposer votre bibliothèque dans le contexte global à l'intérieur d'une variable de votre choix, comme EntryPoint.

Je ne connais pas TypeScript, donc l'exemple utilise plutôt du JavaScript pur. Mais l'élément important ici est le fichier de configuration webpack, et plus particulièrement la section output :

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

Alors vous pourrez accéder à vos méthodes de bibliothèque comme vous l'attendez :

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

Vérifiez le gist avec le code réel.

Réponse #2

J'ai réussi à faire fonctionner cela sans aucune modification supplémentaire du webpack.config.js, en utilisant simplement l'instruction import que j'ai appelée depuis mon fichier main/index.js :

import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;

:

Au départ, j'ai essayé d'accomplir la même chose en utilisant require, cependant il a attribué le wrapper de module à window.EntryPoint plutôt qu'à la classe réelle.

Réponse #3

Dans ma situation, j'ai pu appeler une fonction depuis le JavaScript regroupé à partir d'un autre script en écrivant la fonction sur l'objet window lors de sa création.

// In the bundled script:
function foo() {
    var modal = document.createElement('div');
}
// Bind to the window
window.foo = foo;
// Then, in the other script where I want to reference the bundled function I just call it as a normal function
<button onClick="window.foo()">Click Me</button>

Je n'ai pas pu utiliser Babel, donc cela a fonctionné pour moi.