Webpacked-Code von außen aufrufen (HTML-Skript-Tag)

Angenommen, ich habe eine Klasse wie diese (in Typoskript 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 auch diese statische Methode aufrufen.

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

Das EntryPointist in diesem Fall jedoch undefiniert. Wie würde ich dann das gebündelte Javascript aus einem anderen Skript aufrufen?

Hinzugefügt : Webpack-Konfigurationsdatei .

Es scheint, dass Sie das Webpack-Bundle als Bibliothek verfügbar machen möchten . Sie können das Webpack so konfigurieren, dass Ihre Bibliothek im globalen Kontext innerhalb einer eigenen Variablen verfügbar gemacht wird EntryPoint.

Ich kenne TypeScript nicht, daher verwendet das Beispiel stattdessen einfaches JavaScript. Das wichtigste Element hierbei ist jedoch die Webpack-Konfigurationsdatei und insbesondere der outputAbschnitt:

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 das Wesentliche mit dem tatsächlichen Code.

Ich habe es geschafft, dies ohne weitere webpack.config.jsÄnderungen zum importLaufen zu bringen , indem ich einfach die Anweisung verwendet habe, die ich aus meiner Datei main / index.js aufgerufen habe:

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

Als Referenz ist hier meine weback.config.jsDatei.

Anfangs habe ich versucht, dasselbe mit zu erreichen require, aber es hat den Modul-Wrapper window.EntryPointim Gegensatz zur eigentlichen Klasse zugewiesen .

Unter meinen Umständen konnte ich eine Funktion aus dem gebündelten JavaScript aus 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.

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

Hier ist mein Ansatz, der Kurt Williams sehr ähnlich ist, aber 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 des aufrufe html Seite aufrufe:

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

WEBPACK.CONFIG.JS

1. UMD VERWENDEN

module.exports={
            mode:'development',
            entry:'./yourentry.js',
            output:{
            path:path.resolve(__dirname,"dist"),
            filename:'main.js',
            publicPath:'/dist/',
            libraryTarget:'umd', 
            library:'rstate',
            umdNamedDefine: true,
            libraryExport: 'default' 
        }
    }

index.html

<script src="dist/main.js"></script>
<script>
  window.onload = function () {
  rstate()=>{}
</script>

main.js

export default function rstate(){
console.log("i called from html")
}

2.VAR VERWENDEN

module.exports={
            mode:'development',
            entry:'./yourentry.js',
            output:{
            path:path.resolve(__dirname,"dist"),
            filename:'main.js',
            publicPath:'/dist/',
            libraryTarget:'var', 
            library: 'EntryPoint'
        }
    }

index.html

<script>
  window.onload = function () {
  EntryPoint.rstate()=>{}
</script>

main.js

module.exports={
rstate=function(){
console.log("hi module")
}
}

3. AMD als Bibliothek verwenden, die wir mögen (für diejenigen, die lib machen wollen)

define(['jquery', './aux-lib.js'], function ($) { ..(1).. });

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>