webentwicklung-frage-antwort-db.com.de

Webpack-Code von außen aufrufen (HTML-Script-Tag)

Angenommen, ich habe eine solche Klasse (in TypeScript geschrieben) und bündle sie mit webpack in bundle.js.

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

In meine index.html werde ich das Bundle aufnehmen, aber dann möchte ich diese statische Methode auch nennen.

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

Die Variable EntryPoint ist in diesem Fall jedoch nicht definiert. Wie würde ich das gebündelte Javascript dann von einem anderen Skript aus aufrufen?

Hinzugefügt: Webpack-Konfigurationsdatei .

85
Raven

Es scheint, dass Sie das Webpack-Paket als library verfügbar machen möchten. Sie können Webpack so konfigurieren, dass Ihre Bibliothek im globalen Kontext in einer eigenen Variablen wie EntryPoint angezeigt wird.

Ich kenne TypeScript nicht, daher verwendet das Beispiel stattdessen einfaches JavaScript. Aber das Wichtigste ist hier die Webpack-Konfigurationsdatei und speziell der Abschnitt 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');
  }
};

Dann können Sie wie erwartet auf Ihre Bibliotheksmethoden zugreifen:

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

Überprüfen Sie die Gist mit dem tatsächlichen Code.

105
dreyescat

Es gelang mir, dies ohne weitere webpack.config.js-Modifikationen zum Laufen zu bringen, indem einfach die import-Anweisung verwendet wurde, die ich aus meiner main/index.js-Datei aufgerufen habe:

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

 enter image description here

Hier sehen Sie meine weback.config.js -Datei.

Anfangs habe ich versucht, dasselbe mit require zu erreichen, es wurde jedoch der Modulwrapper window.EntryPoint im Gegensatz zur eigentlichen Klasse zugewiesen.

40
Matt

In meiner Situation konnte ich eine Funktion aus dem mitgelieferten JavaScript aus einem anderen Skript aufrufen, indem ich die Funktion beim Erstellen in das Fenster schreibe. 

// 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>

Ich konnte Babel nicht benutzen, also funktionierte das für mich.

7
Kurt William

Ich hatte eine ähnliche Herausforderung, ich wollte ein Bündel für mehrere Seiten innerhalb einer Reise erstellen und wollte, dass jede Seite einen eigenen Einstiegspunkt in den Code hat und kein separates Bündel für jede Seite.

Hier ist mein Ansatz, der Kurt Williams sehr ähnlich ist, jedoch aus einem etwas anderen Blickwinkel, auch ohne die Webpack-Konfiguration zu ändern:

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

Dann ein Beispiel, wie ich diese Methoden am Ende der html-Seite aufrufe:

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