Pregunta Llamar código web empaquetado desde afuera (etiqueta de script HTML)


Supongamos que tengo una clase como esta (escrita en texto mecanografiado) y la adjunto con un paquete web en bundle.js.

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

En mi index.html incluiré el paquete, pero también me gustaría llamar a ese método estático.

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

sin embargo, el EntryPoint no está definido en este caso. Entonces, ¿cómo llamaría el javascript incluido de otro script?

Adicional: Archivo de configuración de Webpack.


76
2017-12-18 14:07


origen


Respuestas:


Parece que quiere exponer el paquete de webpack como un biblioteca. Puede configurar el paquete web para exponer su biblioteca en el contexto global dentro de una variable propia, como EntryPoint.

No conozco TypeScript, por lo que el ejemplo usa JavaScript simple. Pero la pieza importante aquí es el archivo de configuración del paquete web, y específicamente el output sección:

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

Luego podrá acceder a los métodos de su biblioteca como espera:

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

Comprobar el esencia con el código real.


93
2017-12-18 17:53



Logré hacer que esto funcionara sin más webpack.config.js modificaciones, simplemente usando el import declaración que llamé desde mi archivo principal / index.js:

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

enter image description here

Como referencia, aquí está mi weback.config.js archivo.

Inicialmente intenté lograr el mismo usando require, sin embargo, asignó la envoltura del módulo a window.EntryPoint a diferencia de la clase real.


33
2017-12-18 15:05



En mi circunstancia, pude llamar a una función desde el JavaScript empaquetado de otro script escribiendo la función en la ventana al crearlo.

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

No pude usar Babel, así que esto funcionó para mí.


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