Richiamo del codice Webpacked dall'esterno (tag script HTML)

Supponiamo di avere una classe come questa (scritta in dattiloscritto) e di raggrupparla con webpack in bundle.js.

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

Nel mio index.html includerò il bundle, ma poi vorrei anche chiamare quel metodo statico.

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

Tuttavia, EntryPointin questo caso non è definito. Come chiamerei il javascript in bundle da un altro script allora?

Aggiunto : file di configurazione Webpack .

Sembra che tu voglia esporre il bundle webpack come libreria . Puoi configurare il webpack per esporre la tua libreria nel contesto globale all'interno di una tua variabile, ad esempio EntryPoint.

Non conosco TypeScript, quindi l'esempio usa JavaScript semplice. Ma il pezzo importante qui è il file di configurazione del webpack, e in particolare la outputsezione:

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');
  }
};

Quindi sarai in grado di accedere ai tuoi metodi di libreria come ti aspetti:

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

Controlla l' essenza con il codice attuale.

Sono riuscito a farlo funzionare senza ulteriori webpack.config.jsmodifiche, semplicemente usando la importdichiarazione che ho chiamato dal mio file principale / index.js:

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

Per riferimento, ecco il mio weback.config.jsfile.

Inizialmente ho provato a ottenere lo stesso risultato require, tuttavia ha assegnato il wrapper del modulo window.EntryPointrispetto alla classe effettiva.

Nella mia circostanza sono stato in grado di chiamare una funzione dall'interno del JavaScript in bundle da un altro script scrivendo la funzione nella finestra durante la creazione.

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

Non sono stato in grado di usare Babel, quindi questo ha funzionato per me.

Ho avuto una sfida simile, volevo creare un pacchetto per più pagine all'interno di un viaggio e volevo che ogni pagina avesse il proprio punto di ingresso nel codice e senza un pacchetto separato per ogni pagina.

Ecco il mio approccio, che è molto simile a Kurt Williams ma da un'angolazione leggermente diversa, anche senza cambiare la configurazione del 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

Quindi un esempio di come chiamo questi metodi alla fine della htmlpagina:

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

WEBPACK.CONFIG.JS

1.USD UMD

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. USARE VAR

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. USANDO AMD come libreria che usiamo come (per coloro che vogliono creare lib)

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>