web-dev-qa-db-fra.com

Appel du code Webpacké de l'extérieur (balise de script HTML)

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

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

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

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

Cependant, la variable EntryPoint n'est pas définie dans ce cas. Comment puis-je appeler le code JavaScript fourni à partir d'un autre script?

Added: Fichier de configuration Webpack .

javascripthtmltypescriptwebpack
85
Raven

Il semble que vous souhaitiez exposer le paquet Webpack en tant que bibliothèque . Vous pouvez configurer Webpack pour exposer votre bibliothèque dans un contexte global, à l’aide de votre propre variable, telle que EntryPoint.

Je ne connais pas TypeScript, donc l'exemple utilise du code JavaScript pur à la place. Mais la pièce importante ici est le fichier de configuration webpack, et plus précisément 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');
  }
};

Vous pourrez ensuite accéder aux méthodes de votre bibliothèque comme vous le souhaitez:

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

Vérifiez le Gist avec le code actuel.

105
dreyescat

J'ai réussi à le faire fonctionner sans autre modification de webpack.config.js, simplement en utilisant l'instruction import que j'ai appelée à partir de mon fichier main/index.js:

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

 enter image description here

Pour référence, voici mon weback.config.js fichier.

Au départ, j’ai essayé de faire la même chose en utilisant require, mais il a affecté le wrapper du module à window.EntryPoint au lieu de la classe réelle.

40
Matt

Dans mon cas, j'ai pu appeler une fonction à partir du JavaScript fourni à partir d'un autre script en écrivant la fonction dans la fenêtre 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'étais pas capable d'utiliser Babel, donc cela a fonctionné pour moi.

7
Kurt William

J'avais un défi similaire, je voulais créer un ensemble pour plusieurs pages d'un voyage et je voulais que chaque page ait son propre point d'entrée dans le code, sans paquet séparé pour chaque page.

Voici mon approche, qui ressemble beaucoup à Kurt Williams mais sous un angle légèrement différent, également sans changer de configuration de webpack:

JourneyMaster.js 

import { getViewData } from './modules/common';
import { VIEW_DATA_API_URL } from './modules/constants';
import { createLandingPage, createAnotherPage } from './modules/components/pageBuilder';

window.landingPageInit = () => {
    getViewData(VIEW_DATA_API_URL).then(viewData => {
        createLandingPage(viewData);
    });
};

window.anotherPageInit = () => {
    getViewData(VIEW_DATA_API_URL).then(viewData => {
        createAnotherPage(viewData);
    });
};

// I appreciate the above could be one liners,
// but readable at a glance is important to me

Ensuite, un exemple de la façon dont j'appelle ces méthodes à la fin de la page html:

<script src="/js/JourneyMaster.js"></script>
<script>window.landingPageInit();</script>
0
Darren Sweeney