Frage Webpacked-Code von außerhalb aufrufen (HTML-Script-Tag)


Angenommen, ich habe eine Klasse wie diese (geschrieben in Typoskript) und bündle sie mit Webpack in bundle.js.

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

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

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

Aber die EntryPoint ist in diesem Fall nicht definiert. Wie würde ich das gebündelte Javascript von einem anderen Skript dann nennen?

Hinzugefügt: Webpack-Konfigurationsdatei.


76
2017-12-18 14:07


Ursprung


Antworten:


Anscheinend möchten Sie das Webpack - Paket als Bibliothek. Sie können Webpack so konfigurieren, dass Ihre Bibliothek im globalen Kontext innerhalb einer eigenen Variablen wie z EntryPoint.

Ich kenne TypeScript nicht, daher verwendet das Beispiel stattdessen normales JavaScript. Aber das wichtigste Stück hier ist die Webpack-Konfigurationsdatei, und speziell die output Sektion:

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 auf Ihre Bibliotheksmethoden wie erwartet zugreifen:

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

Überprüf den Kern mit dem eigentlichen Code.


93
2017-12-18 17:53



Ich schaffte es, das ohne weitere Arbeit zu schaffen webpack.config.js Änderungen, indem Sie einfach die import Anweisung, die ich aus meiner Datei main / index.js aufgerufen habe:

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

enter image description here

Als Referenz, hier ist mein weback.config.js Datei.

Anfangs versuchte ich dasselbe zu erreichen require, hat jedoch den Modulwrapper zugewiesen window.EntryPoint im Gegensatz zu der eigentlichen Klasse.


33
2017-12-18 15:05



In meinem Fall konnte ich eine Funktion aus dem gebündelten JavaScript von einem anderen Skript aufrufen, indem ich die Funktion beim Erstellen in das Fenster schrieb.

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


5
2017-09-29 16:55



App.ts:

namespace mytypescript.Pages {

        export class Manage {

     public Initialise() {
     $("#btnNewActivity").click(() => {
                    alert("sdc'");
                });
        }
    }
}

mypage.html:

 <input class="button" type="button" id="btnNewActivity" value="Register New Activity" />

 <script type="text/javascript">
    var page = new mytypescript.Pages.Manage();
    page.Initialise();
</script>

-4
2018-05-29 22:48