Appel de code Webpack de l'extérieur (balise de script HTML)

Supposons que j'ai une classe comme celle-ci (écrite en manuscrit) et que je la intègre avec webpack dans bundle.js.

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

Dans mon index.html, j'inclurai le bundle, mais j'aimerais également appeler cette méthode statique.

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

Cependant, le EntryPointn'est pas défini dans ce cas. Comment puis-je appeler le javascript fourni à partir d'un autre script?

Ajouté : fichier de configuration Webpack .

Il semble que vous souhaitiez exposer le bundle webpack en tant que bibliothèque . Vous pouvez configurer webpack pour exposer votre bibliothèque dans le contexte global dans une variable de votre choix, comme EntryPoint.

Je ne connais pas TypeScript, donc l'exemple utilise plutôt du JavaScript brut. Mais la pièce importante ici est le fichier de configuration du webpack, et plus précisément la outputsection:

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

Ensuite, vous pourrez accéder aux méthodes de votre bibliothèque comme vous le souhaitez:

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

Vérifiez l' essentiel avec le code réel.

J'ai réussi à faire fonctionner cela sans aucune autre webpack.config.jsmodification, en utilisant simplement l' importinstruction que j'ai appelée à partir de mon fichier main / index.js:

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

Pour référence, voici mon weback.config.jsdossier.

Au départ, j'ai essayé d'accomplir la même chose en utilisant require, mais il a attribué le wrapper de module window.EntryPointpar opposition à la classe réelle.

Dans ma situation, j'ai pu appeler une fonction à partir du JavaScript fourni à partir d'un autre script en écrivant la fonction dans la fenêtre lors de sa création.

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

Je n'ai pas pu utiliser Babel donc cela a fonctionné pour moi.

J'ai eu un défi similaire, je voulais créer un bundle pour plusieurs pages dans un voyage et je voulais que chaque page ait son propre point d'entrée dans le code, et sans bundle séparé pour chaque page.

Voici mon approche, qui est très similaire à Kurt Williams mais sous un angle légèrement différent, également sans changer la configuration du 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

Ensuite, un exemple de la façon dont j'appelle ces méthodes à la fin de la htmlpage:

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

WEBPACK.CONFIG.JS

1.UTILISER 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. UTILISATION DE 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.UTILISER AMD comme bibliothèque que nous utilisons comme (pour ceux qui veulent faire 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>